Minimum height needed in textarea for draggable resize

css, html, textarea

Solution

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; }

Problem

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?

Original source