How to define the height and width of the text area in Jquery Mobile?

Question

Before entry, the input field is predefined size (two lines on the screen width)..:( Its not taking anything as I define in the rows and cols value.. Ex: Still the input feild is fixed...Showing no changes.

Gradually, as we introduced the text, the height of the input field increases, to view the text introduced in its entirety.

But what I need is to define my own height and width of the textfeild...And gradually feild should increase if the text entered is more.

Code I am using is:

<div data-role="content">
<form method="post" name="login" data-ajax="false">
<label for="textarea"><h3><u>Add Comment</u> : </h3></label>
<textarea cols="8" rows="50" name="textarea" id="comment">
</textarea>
</form>
<div>

Answer 1

There's a couple of ways you can do this.

You can use the cols & rows attributes...

​$("textarea").​​​​​​attr("rows", 20)​​​​​​;
​$("textarea").​​​​​​attr("cols", 25)​​​​​​;

or set the width & height directly...

​$("textarea").​​​​​​height(200);
​$("textarea").​​​​​​width(250);

I'd recomment giving the textarea an ID and using that as the selector, as the above will obviously affect all textarea elements on the page.

Answer 2

Try this..

$("textarea#comment").​​​​​​css({'height':'100px', 'width':'250px'});

FIDDLE

Answer 3

If I need to preset the size of a textarea, I declare the size in the HTML itself:

<textarea id="Summary" style="height:100px; width:250px"></textarea>

Answer 4

jQuery mobile will auto append the class ".ui-input-text" to textarea
then the height will be set to 50px (in my jQuery mobile version)
so we need to do is setting this in your CSS file:

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

and all done :)

Answer 5

This has been answered here: JQuery Mobile textarea: how does it use 'rows' attribute?

In short, add the !important flag to your css item.

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