JQuery Mobile textarea: how does it use the "rows" attribute?

Question

I would like to dynamically generate text fields using jQuery Mobile with different number of lines. I was going to use a knockout for this, bind data to the rows attribute.

eg. here: http://jsfiddle.net/j7b9A/2/

 <label for="textarea-1">5 rows:</label> <textarea rows="5" name="textarea-1" id="textarea-1"></textarea> <label for="textarea-2">10 rows:</label> <textarea rows="10" name="textarea-2" id="textarea-2"></textarea> 

However, JQuery Mobile ignores the rows attribute, which is well-documented: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea and is even included in JQuery Mobile's own documentation: http: //view.jquerymobile .com / 1.3.1 / dist / demos / widgets / textinputs / index.html # Textarea .

The comment here states that setting the height and width overrides the rows attribute: https://stackoverflow.com/a/416829/ This seems to be due to the fact that jQuery Mobile performs the transition when the text area expands. So, is the rows attribute always completely overridden?

Another similar question is here: How to make a 10-line text area fixed? but that doesn’t help me since I don’t want to fix the height of all text areas, I would like them to change as they usually can use the rows attribute.

I also noticed that I can’t explain that in my own code a scammer style="height: 184px;" added to one of my text fields but not another. The other simply uses the standard 50px style, as indicated in this answer: jQuery Mobile and lines in the text area - this seems to indicate that something else is happening, but I cannot reproduce it in a simple fiddle.

I quickly looked at the source of jQuery Mobile, but don’t see that the rows attribute is used at all?

What would be the best way to specify a range of line heights for a range of related jQuery Mobile text fields?

Answer 1

jQM leverages textarea by adding different classes for responsiveness and styling. The fastest and easiest way to maintain the height of rows is to override the jQM class.

Demo

CSS solution:

 .custom_class { height: auto !important; /* !important is used to force override. */ } 

JS Solution - Set the height after improving the text box.

 setTimeout(function () { $('textarea').css({ 'height': 'auto' }); }, 0); 

Answer 2

all you need ... add this

 textarea.ui-input-text { height: inherit !important} 

Answer 3

JQuery Mobile is designed to be responsive, so by design it won't take up space until you need it. If you add data to a text field, either through input or through code, you can see that it grows as needed.

If you want to override this size when it is empty, you have two options:

• Use the Omar method, which should disable the JQM role, as it was in the JSFiddle example.

• Another is to override the default class as shown in this answer .

Answer 4

I had the same problem and finally found a solution. you can set 'data-autogrow = "false" in the textarea element, after which you can set the row or height attribute in css. it works in jQuery mobile 1.4.0+

Answer 5

The contents of the text area automatically scroll when there are more lines. max-height as you wish. Add css

  textarea.size{max-height:30px;} <textarea name="textarea-1" id="textarea-1" style="max-height:30px;"> 

Answer 6

You can use this: data-autogrow="false"
like this: <textarea rows="10" name="textarea-2" id="textarea-2" data-autogrow="false"></textarea>