Change the height and width of text area

html css asp.net twitter-bootstrap textarea

50,467

Solution 1

Remove the height declaration on the textarea, just specify the rows using rows="2"

<textarea rows="2" cols="200" disabled="disabled" style="width:500px;">
Date
User 
</textarea>

height will conflict with rows and width will conflict with cols.

Solution 2

Keep reading if you want to set height of your text areas depending on size of the content

<textarea  id ="code" rows="2" cols="200" disabled="disabled" style="width:100%; height:auto"  >
    <!DOCTYPE html>
    <html>
    <body>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

    </body>
    </html>

    </textarea>

And then in Document ready assign height of text area = scroll size

$(document).ready(function(){

  textAreaAdjust(document.getElementById('code') );
});

function textAreaAdjust(o) {
  o.style.height = "1px";
  o.style.height = (o.scrollHeight)+"px";
}

50,467

Author by

John Jerrby

Now trying to learn .Net

Updated on December 07, 2020

Comments

John Jerrby over 3 years
I need to change the width and the height of the <textarea> tag of HTML and I need it to have just two lines (rows). Currently, it has just one line. Any idea how to fix this?

For the width, even if I change it to 1000px nothing changed and I don't understand why.
```
<div>
    <textarea rows="2" cols="200" disabled="disabled" style="width:500px; height: 10px;">
        Date
        User 
    </textarea>
</div>
```
I'm using Bootstrap in an MVC5 application.
speak almost 10 years

In that case, please post your full code as you have something conflicting with it. In this JSFiddle you can see it working: jsfiddle.net/6npu7/1
John Jerrby almost 10 years

-thanks I found some conflict in the code for the hight but for width I didn't found why I cannot give it more than cols=200,what can cause to this,any idea?
speak almost 10 years

You should not override styles using !important when it can be easily dictated via rows or cols or by simply removing them.
Youness almost 10 years

but you cant remove the styles added by the browser