title: JQuery Mobile textarea: how does it use 'rows' attribute?
body: <p>I would like to dynamically generate textareas, with JQuery Mobile, with varying numbers of rows. I was intending on using knockout for this, data-bind to the <code>rows</code> attribute.</p>
  
  <p>E.g. here: <a href="http://jsfiddle.net/j7b9A/2/" rel="nofollow noreferrer">http://jsfiddle.net/j7b9A/2/</a></p>
  
  <pre><code>&lt;label for="textarea-1"&gt;5 rows:&lt;/label&gt;
  &lt;textarea rows="5" name="textarea-1" id="textarea-1"&gt;&lt;/textarea&gt;
  
  &lt;label for="textarea-2"&gt;10 rows:&lt;/label&gt;
  &lt;textarea rows="10" name="textarea-2" id="textarea-2"&gt;&lt;/textarea&gt;
  </code></pre>
  
  <p>However, JQuery Mobile seems to ignore the <code>rows</code> attribute, which is well-documented: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea</a>, and is even included in JQuery Mobile's own documentation: <a href="http://view.jquerymobile.com/1.3.1/dist/demos/widgets/textinputs/index.html#Textarea" rel="nofollow noreferrer">http://view.jquerymobile.com/1.3.1/dist/demos/widgets/textinputs/index.html#Textarea</a>.</p>
  
  <p>A comment here states that setting the height and width overrides the <code>rows</code> attribute: <a href="https://stackoverflow.com/a/7194692/1061602">https://stackoverflow.com/a/7194692/1061602</a>. It seems that it is because JQuery Mobile is doing a transition when the textarea expands. So is rows attribute always being completely overridden?</p>
  
  <p>Another similar question is here: <a href="https://stackoverflow.com/questions/17077267/how-to-make-text-area-to-be-height-of-10-rows-fixed?rq=1">How to make text area to be height of 10 rows fixed?</a>, but this doesn't help me as I don't want to fix the height of all textareas, I would like them to vary, as they can normally using the <code>rows</code> attribute.</p>
  
  <p>Also what I have noticed, which I can't explain, is that in my own code, a rogue <code>style="height: 184px;"</code> is added to one of my textareas, but not another. The other just uses the standard style of 50px, as highlighted in this answer: <a href="https://stackoverflow.com/questions/9725196/jquery-mobile-and-textarea-rows">jQuery Mobile and textarea rows</a> - this would seem to indicate there is something else going on, but I can't reproduce this yet in a simple fiddle.</p>
  
  <p>I've had a quick look at the JQuery Mobile source but I can't see the <code>rows</code> attribute being used at all?</p>
  
  <p>What would be the best way of specifying a range of row heights for a range of bound JQuery Mobile textareas?</p>