Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change the height and width of text area

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.

like image 882
John Jerrby Avatar asked Jul 28 '14 11:07

John Jerrby


2 Answers

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.

like image 147
speak Avatar answered Oct 23 '22 03:10

speak


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";
}
like image 1
Hitesh Sahu Avatar answered Oct 23 '22 02:10

Hitesh Sahu