CODEWITHSUNDEEP
javascripthtmlcsstextarea
Crouch
Crouch

Reputation: 896

Automatic text area resizing

I have a text area that resizes automatically but now it ignores my css for the height of the text area and I can't find a way around it. It doesn't ignore any other css just the height attribute.

HTML

   <textarea id="test" class="text2" name="lgyesterday" onkeyup="resizeTextarea('test');" data-resizable="true"> </textarea>

CSS

.text2{
    margin:10px;
    float:left;
    width:47%;
    font-family:sans-serif, "arial helvetica";
        font-size: 15px;
        height: 80px;
}

I just wondered if anyone had any idea how I could set the height of the textarea to start with?

Upvotes: 0

Views: 181

Answers (2)

Roland
Roland

Reputation: 1

The height attribute in your example works fine for me (Chrome). But it is also possible to define the height with the "rows" attribute. Example:

<textarea cols="50" rows="10">

Upvotes: 0

David Hellsing
David Hellsing

Reputation: 108520

Remove this:

onkeyup="resizeTextarea('test');"

That is most likely what is resizing the area using inline styles, that will override your CSS. You can also override the inline styles by adding !important:

height: 80px!important;

EDIT

Try the min-height if you want to prevent if from becoming lower:

min-height: 80px;

Upvotes: 2

Related Questions