1

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>
frosty
  • 2,559
  • 8
  • 37
  • 73
  • Check https://stackoverflow.com/a/10943721/3063226, using box-sizing: border-box; for the textarea is probably what you're looking for. – Heitor Aug 03 '17 at 06:54

3 Answers3

1

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.

I wrestled a bear once.
  • 22,983
  • 19
  • 69
  • 116
  • I explained it here: http://stackoverflow.com/questions/34301906/setting-the-height-of-a-textarea-inside-a-table/34301935?noredirect=1#comment56346033_34301935 – Praveen Kumar Purushothaman Dec 16 '15 at 00:34
  • 1
    It is as you said. Changing it to em or px solves the problem immediately. Also, you explained it in a way that made me understand what I did wrong, and what to look out for in the future. – frosty Dec 16 '15 at 00:35
  • That's a good thing to know. However if that's the case then even the % on width shouldn't work. right ? Just curious. – DinoMyte Dec 16 '15 at 00:41
  • 1
    @DinoMyte That's what he's saying. % doesn't work, so switch over to either em or px. – frosty Dec 16 '15 at 00:43
  • @DinoMyte, yes it is. you are using % there. use em like i said: https://jsfiddle.net/t5thymzq/2/ do you understand now? – I wrestled a bear once. Dec 16 '15 at 01:01
  • @Pamblam, I understand that using em or px over % works for height, but it don't justify why % works on width and not height. – DinoMyte Dec 16 '15 at 01:04
  • @DinoMyte Maybe. Because % works for both height and width if you take off the form element. – frosty Dec 16 '15 at 01:12
  • Ooooh, i honestly didn't even notice the form element. Then your percents are relative to the height/width of the form element, not the ``.. that's why. there must be some padding giving your cells width/height but the form wouldn't have any dimensions. – I wrestled a bear once. Dec 16 '15 at 01:18
  • Apparently, seems like it has something to do specific to html tables, http://stackoverflow.com/questions/27846045/understanding-css-table-cell-and-percentage-width – DinoMyte Dec 16 '15 at 01:26
  • nope. you're making it complicated again. read the w3schools page for css width and height and look at the table that explains what % does. – I wrestled a bear once. Dec 16 '15 at 01:32
  • tables are just wierd because their width and height are determined by several factors.. – I wrestled a bear once. Dec 16 '15 at 01:33
  • Man, I'm starting to hate tables. – frosty Dec 16 '15 at 01:34
0

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>
Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
0

With this you can set size for text area

$("textarea").css("height", $("textarea").parent("td").height())
.css("width", $("textarea").parent("td").width())
ashkufaraz
  • 5,179
  • 6
  • 51
  • 82