Textarea's Rows, and Cols Attribute in CSS

textarea's rows, and cols attribute in CSS

width and height are used when going the css route.

<!DOCTYPE html>
<html>
    <head>
        <title>Setting Width and Height on Textareas</title>
        <style>
            .comments { width: 300px; height: 75px }
        </style>
    </head>
    <body>
        <textarea class="comments"></textarea>
    </body>
</html>

sizing a textarea with CSS vs with cols and rows

cols and rows are relative to font size. height and width aren't.

http://jsfiddle.net/rVUEE/1/

EDIT: Saying they are relative to "font size" is a bit too simplistic. They take into account things such as line-height and letter-spacing if explicitly set as well.

Should I size a textarea with CSS width / height or HTML cols / rows attributes?

I recommend to use both. Rows and cols are required and useful if the client does not support CSS. But as a designer I overwrite them to get exactly the size I wish.

The recommended way to do it is via an external stylesheet e.g.

textarea {

  width: 300px;

  height: 150px;

}

<textarea> </textarea>

use the measuring unit of cols in css

Depending on how you've composed your HTML — please remember to show your [mcve] code in your questions, it makes it far easier for us to help and offer practical advice — there are some options:

*,

::before,

::after {

  /* forcing all elements, and the listed pseudo-elements,

     to use the border-box sizing; including padding and

     margins into the calculated width: */

  box-sizing: border-box;

  /* resetting margin and padding to zero for consistency: */

  margin: 0;

  padding: 0;

}

div {

  /* the default margin for all <div> elements, to move them

     apart from the left-edge of the viewport and away from

     their predecessor: */

  margin: 1em 0 0 1em;

}

div.withBlock {

  /* we want the <div> to collapse to the size of the

     <textarea>: */

  display: inline-block;

}

div.withBlock textarea {

  /* using display: block to force the <button> to a new

     line: */

  display: block;

}

div.withBlock button {

  /* specifying a 100% width, which will cause the

     <button> to be the full width of the parent -

     <div> - element, which is itself shrunk down 

     to the width of the <textarea>: */

  width: 100%;

  /* to separate the two elements for visibility: */

  margin-top: 10px;

}

div.withGrid {

  /* using CSS Grid layout: */

  display: grid;

  /* defining the one column as min-content, which

     causes the column to be the minimum width 

     required to display its largest content (in this

     case that is the <textarea> with its defined width:*/

  grid-template-columns: min-content;

  /* to separate the contents from each other with a

     10px gutter: */

  grid-gap: 10px;

}

div.withFlex {

  /* this emulates the previous 'display: inline,' but

     uses the flexbox layout within the <div>; causing

     the <div> to collapse to the size of its largest

     child element: */

  display: inline-flex;

  /* the automatic value of flex-direction is 'row,' so

     because we want columns (I think) we're specifying

     the following value: */

  flex-direction: column;

}

div.withFlex button {

  margin-top: 1em;

}

<!-- we wrap each <textarea> and <button> pair in a parent <div>,

     though in practice you may have them wrapped in something

     like a <fieldset>, or the <textarea> may be wrapped in a

     <label> with the <button> being a sibling of that <label> -->

<div class="withBlock">

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

  <button>the button</button>

</div>

<div class="withGrid">

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

  <button>the button</button>

</div>

<div class="withFlex">

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

  <button>the button</button>

</div>

How correctly specify the textarea width? Using the cols attribute I obtain different width using different browser

Apply width:100% for textarea

 <textarea style="visibility: hidden; width:100%;" rows="5" cols="70" id="myRejectNote"></textarea>

DEMO

How to display visual rows and cols in textarea using css

Not terribly different than the other solutions here, but it's looking to me like you are asking for <input type="text" /> boxes on the left-hand side, and status text on the right-hand side. I agree with the others that the simplest way to create this is with a <table>. Here's an example that looks almost identical to your input:

HTML:

<div class="border">
 <table>
  <tr>
   <td><input type="text" value="2245319951" /></td>
   <td>Checkout Failed</td>
  </tr>
  <tr>
   <td><input type="text" /></td>
   <td></td>
  </tr>
  <!-- More repeated rows -->
 </table>
</div>

CSS:

div.border * { 
  font-family: Verdana;
  font-size: 8pt;
}

div.border {
  border: 1px solid #000;
  width: 268px;
  height: 100px;
  overflow-y: scroll;
}
table {
  background: #fff;
  border-collapse: collapse;
}
table, table tr, table td {
  margin: 0;
  padding: 0;
}

table td {
  border: 1px solid #ccc;
  width: 125px;
}

table td:nth-child(2) {
  color: red;
  font-weight: bold;
  padding: 0 5px;
}

table input[type="text"] {
  border: none;
  outline: none;
  width: 125px;
}

And here is a CSSDesk Snippet which shows it in action. On my version of Chrome, it renders as:

Example

How to make cols= work when a textarea is in a grid container

It's an alignment issue making the textarea stretched by default. You can fix this using margin auto on the right

.grid { display: grid; }

textarea:not([cols]) { width: 100%; }

textarea {

  margin-right:auto;

}

<h2>Not in a grid container:</h2>

<div>

  <textarea cols="10" rows="6">some dummy text</textarea>

  <textarea>some other text</textarea>

</div>

<h2>In a grid container:</h2>

<div class="grid">

  <textarea cols="10" rows="6">some dummy text</textarea>

  <textarea>some other text</textarea>

</div>

Textarea's Rows, and Cols Attribute in CSS