Menu
So, I'ld like to display a textarea on just 1 row.
But jQuery Mobile doesn't think so... Whatever value I set in the rows attribute, it always is 2 rows height...
Would it have any solution ?
261
HTML | <textarea> rows Attribute. The HTML textarea rows Attribute is used to specify the number of visible text lines for the control i.e the number of rows to display. It also specifies the visible height of the Textarea.
We can set the size for the text area by using rows and columns. rows*columns will be the size of the text area. For columns, we have to use the cols keyword.
It can be achieved by using JavaScript and jQuery. Method 1: Using JavaScript: To change the height, a new function is created which changes the style property of the textarea. The height of the textarea is first set to auto. This value makes the browser set the height of an element automatically.
To automatically resize textarea height to fit the text, we can use the Element. scrollHeight , which gives the actual height of an element's content, including overflow. It is the minimum height the element would require to fit all the content on the screen.
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/
96
You can also use max-height to set the autogrowing limits to textarea.
textarea.ui-input-text {
max-height : 100px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
