Jquery Mobile Textarea: How Does It Use 'Rows' Attribute

JQuery Mobile textarea: how does it use 'rows' attribute?

jQM enhances textarea by adding different classes for responsiveness and styling purposes. The fastest and easiest way to maintain rows height is by overriding jQM class.

Demo

CSS solution:

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

JS solution - set height after textarea is enhanced.

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

jQuery Mobile and textarea rows

The jQuery Mobile CSS sets a specific height for textarea elements:

textarea.ui-input-text {
    height : 50px;

    -webkit-transition : height 200ms linear;
       -moz-transition : height 200ms linear;
         -o-transition : height 200ms linear;
            transition : height 200ms linear;
}

You can create your own rule to override this height to something more single-line:

.ui-page .ui-content .ui-input-text {
    height : 25px;
}​

Demo: http://jsfiddle.net/mEs8U/

textarea height and width in jQuery mobile?

Try setting "width: auto". Also, instead of ".attr('style', ...)" you can use ".css('attribute', 'value')"

$('#newCommentText').css('background-color', 'white').css('font-size', '18px').css('height', '7em').css('width', 'auto');

Change textarea rows in jquery

This will find the textarea element in the #thisspecificid

$('#thisspecificid textarea').attr('rows', 20);

Demo: https://jsfiddle.net/tusharj/rwmwyhd6/

How to resize the text area in query mobile?

Working example: http://jsfiddle.net/Gajotres/7JqRG/3/

Just use this CSS:

#text-12 {
    width: 100% !important;
    height: 50px !important;
    max-height: 50px !important;
}

It will lock textarea height. !important must be used to override default values.

How to change size of text input but not textarea in jquery mobile

Ok, it sounds like you're using a specific jQuery Textinput widget (http://api.jquerymobile.com/textinput/) due to the use of "ui-input-text".

To apply these styles to only the text inputs, and NOT text areas, try:

div.ui-input-text { height: 42px !important }

This says only apply this style to div's that also have the class, "ui-input-text".

If you were to inspect the source generated by the input text widget you'd see:

<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
  <input type="tel" name="tel" id="tel" value="">
</div>

But, when used on a text area generates:

<textarea name="textarea" id="textarea-a" class="ui-input-text ui-shadow-inset ui-body-inherit ui-corner-all ui-textinput-autogrow" style="height: 96px;">
</textarea>

Alternatively, you could just specify a separate CSS definition to override the .ui-input-text for text areas:

.ui-input-text {
    height:42px !important;
}

textarea.ui-input-text {
    height:100px !important;
}

---

Related Topics