2

I have a textarea (in Chrome) defined as:

<textarea style="width:100%; height:500px;"></textarea>

This forces the text area to have those dimensions, which are the preferred dimensions, so that's good.

However if the user wants to drag the resize handle to make that textarea smaller or larger, they can't

If I remove the style all together, then the text area collapses to a small square.

I want to specify the preferred size, but let the user drag it larger or smaller in any direction. Can this be done?

Victor Grazi
  • 15,563
  • 14
  • 61
  • 94
  • Generally resize seems to work for increasing size, but not so well for decreasing the size. – Garconis Dec 20 '16 at 16:59
  • Just a note: In Firefox resizing is allowed by default even with fixed width/height CSS settings. If you set min-width/min-height, user can increase size in Chrome... It solves problem partially. – sinisake Dec 20 '16 at 17:05
  • 1
    See http://stackoverflow.com/questions/10356797/cant-reduce-size-of-resizable-textarea-in-chrome, http://stackoverflow.com/questions/18178301/how-can-i-use-css-resize-to-resize-an-element-to-a-height-width-less-than-init, etc. –  Dec 20 '16 at 17:07
  • It may also be worth considering going the route of "auto-resizing" based on the amount of content/text within the textarea see: http://jsfiddle.net/Garconis/kefknbyr/ Cool right? – Garconis Dec 20 '16 at 17:13
  • @LGSon yes, I agree –  Dec 20 '16 at 17:36

1 Answers1

1

You can also specify dimensions using the attributes rows and cols, e.g.

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

rows = the number of lines high the textarea should be.

cols = the number of characters wide the textarea should be.

Depending on the rest of your css, the textarea may not go wider than its parent container.

Richard Parnaby-King
  • 14,703
  • 11
  • 69
  • 129