CODEWITHSUNDEEP
javascriptjqueryhtmlcss
frosty
frosty

Reputation: 2649

Setting the height of a textarea inside a table

I've set the height of my textarea to 500%, but for some reason it's not changing to 500%. I think it has something to do with it being inside a table, but I'm not sure what to change set the height correctly. For some reason, the width of the textarea CAN be change inside the table.

table,td {
border: 1px solid black;
}
textarea {
resize: none;
width: 100%;
height: 500%;
}
<table> 
<tr>

<td> 
firstTD 
</td> 

<td>
<form method = 'POST' action = 'updateProfile.php'>
<textarea id = 'textarea' placeholder = 'type something here...' onfocus = \"this.placeholder = ''\" onblur = \"this.placeholder = 'type something here...'\" maxlength = '10000'></textarea>
</form>
</td>

</tr> 
</table>

Upvotes: 1

Views: 2738

Answers (3)

ashkufaraz
ashkufaraz

Reputation: 5297

With this you can set size for text area

$("textarea").css("height", $("textarea").parent("td").height())
.css("width", $("textarea").parent("td").width())

Upvotes: 0

I wrestled a bear once.
I wrestled a bear once.

Reputation: 23379

The other answer solves the problem, but doesn't explain it. When you use % to define width/height in CSS, you are making it whatever% of that element's container' width/height.

When you set your textarea to be 100% of an otherwise empty <td>, it's not going to be very big.

Setting it to posistion:absolute will work IF none the ancestor elements are positioned. A simpler approach would be to just use something other than % to define your width and height. Try width:10em; and adjust it until you get it right.

Edit.

To answer a question in the comments: The reason using % to define the height works in this case, is because the empty cell has a height, but not a width. An empty table cell still inherits the height of the row, which is as tall as the tallest <td>. In this case there is another <td> that has content, giving the cell a height.

So, If there was another row, and one of the cells in the same column had content, then width would work with % too.

That said, it's not a good idea to use % for width and height in a table, because when the content in the table changes, your percentages will change. Also, when you use % as opposed to px or em, it will not stretch the parent container.

Edit again

I honestly didn't even notice the form element. Then your percents are relative to the height/width of the form element, not the <td>. There must be some padding giving your cells width/height but the form wouldn't have any dimensions.

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

Try setting position: absolute to textarea and give a position: relative to the parent. Also remove width and give left and right values as 0. But remember, this will make the textarea to overflow out of the content. Is that what you are expecting?

table,
td {
  border: 1px solid black;
  position: relative;
  width: 350px;
}
textarea {
  resize: none;
  height: 500%;
  left: 0;
  right: 0;
  position: absolute;
  top: 0;
}
<table>
  <tr>
    <td>
      firstTD
    </td>
    <td>
      <form method='POST' action='updateProfile.php'>
        <textarea id='textarea' placeholder='type something here...' onfocus=\ "this.placeholder = ''\" onblur=\ "this.placeholder = 'type something here...'\" maxlength='10000'></textarea>
      </form>
    </td>
  </tr>
</table>

Or if you need something like this?

table,
td {
  border: 1px solid black;
  position: relative;
  width: 350px;
}
textarea {
  resize: none;
  height: 10em;
  width: 100%;
  display: block;
  box-sizing: border-box;
}
<table>
  <tr>
    <td>
      firstTD
    </td>
    <td>
      <form method='POST' action='updateProfile.php'>
        <textarea id='textarea' placeholder='type something here...' onfocus=\ "this.placeholder = ''\" onblur=\ "this.placeholder = 'type something here...'\" maxlength='10000'></textarea>
      </form>
    </td>
  </tr>
</table>

Upvotes: 0

Related Questions