Minimum height needed in textarea for draggable resize

Question

I have a textarea on my page. It has this draggable corner which lets me resize it. Like in this screencrop below

If I resize it too small, the corner will disappear (even though the corner will still let me resize the textarea).

I want to place the minimum height to whats needed for it to display the draggable corner image so not as to confuse users

What would this minimum-height required be? Do stuff like padding and margin affect it? Is it only in Chrome or is it the same in Safari/IE.. etc?

Answer 1

You should be able to define in the element cols and rows. Like Doing this creates the minimun size. Then you can resize from there. OR in CSS

In CSS you could do min and max sizes. Safe for most modern browsers

  #confinedSpace textarea { resize:vertical; max-height:300px; min-height:200px; }
  #confinedSpace textarea.horiz { resize:horizontal; max-width:400px; min-width:200px; }