I want the height of an editable textarea tag to be adjusted to the lines of text.
I tried to set the rows attribute to 1 on the textarea, to have have the default height if there's no text or only one line of text - but the textarea doesn't adjust in height automatically when there's more lines of text.
I'm not looking for expanding height while writing, I'm mainly concerned on page load.
Not possible to dynamically adjust height of textarea with only HTML/CSS.
Related
A portion of a text seems to climb out of the page boundaries. Why is that?
What happens to text if 'auto' value is assigned to overflow property, to the element containing the text?
Overflow property is used to add a scrollView to a big text within small space. Auto will decide if you tag needs a scrollBar or not. Try setting a height to your text or body.
I have a text area element that I want to cap at an initial height of 168px that is expandable vertically but has an initial value that's large and is auto-expanding the box past that 168px initial height on page load. I want to be able to allow the user to be able to expand that box if they want to later on but initially on page load it should be set to 168px with the overflow from that initial value hidden. Have tried various combinations of min-height, resize: vertical, and overflow without success. The box is still autoexpanding as the initial value gets loaded into it on page load. Is this possible with CSS?
I guess, this code will work. Please share your code as a snippet, it would be easy to debug.
textarea{
resize:vertical;
min-height:168px;
}
<textarea></textarea>
Open pen
Focus last cell and write some text.
Table is resizing even if all text wraps into new lines. I want to keep max-width in percentage units, and table-layout: auto.
Any idea how css prevent that odd behaviour with css? As long as text is wrapping to new line it shouldn't extend table cell.
This occurs at least in chrome and safari.
add 100% width to your div, that is 100% width of table cell within.
I tried it in different browsers,but it seems to be not working.If I change the number(min-height),then beyond 50 it works and below 50 with any range of values it stays at the same height.So,is there any way to keep min-height of a textarea below 50,say at 10px?
<textarea style="width:700px;resize:none;min-height:10px;"></textarea>
<textarea style="width:700px;resize:none;height:10px;"></textarea>
That is related with the default value of the attribute rows in the text area!
The default is 2 according to http://www.w3schools.com/tags/att_textarea_rows.asp.
So try to change it to 1 an play with the height attribute a little.
If you want your textarea even littler that 1 row size, then adjust your text area style in css "line-height".
The min-height property sets the minimum height of an element, as its name suggest. This means a height that is used unless nothing requires a larger height. For a textarea element, the default height is determined by the number of rows (specified by the rows attribute, which is defaulted to 2 by browser practice and by HTML5 CR) and by browsers’ calculation of line height.
Thus, you can set min-height even to 10px, and it works as defined – the actual height is larger, but that follows from the definition.
To set the height, you would use the height property, as in your example, and/or the rows attribute, which indirectly sets the height. As usual, it sets the content height. The total height of a textarea box is content height plus top padding plus bottom padding plus top border plus bottom border.
It is difficult to imagine a situation where it would make sense to set textarea height to 10px, which is not enough for even one line of text in a size that is legible to most human beings. Moreover, if you really want to have an input box that is one line tall and is not resizable, an input type=text element would be a much more practical and much more logical choice than textarea.
How can I make the textarea height match the height of the textarea as if it only had one row. It would essentially look like a text field. The nonreuseable way is by playing with the height attribute and making the textarea look like it only spans one row, but is there a reuseable way?
When I use the CSS attribute height: auto, it spans two rows.
There is the rows attribute
<textarea rows="1"></textarea>
FIDDLE
Doesn't seem to work in firefox though, and in many browsers the user can simply resize a texarea.