How to resize a flexible text-area on a mobile device?

Question

On a computer, it's easy to resize a textarea, like this one:

<textarea>

http://jsfiddle.net/sssdpepa/

you just click and drag the thing in the bottom right corner. But on mobile devices, I can't seem to resize the same textarea. Is there something I'm missing? Or do I have to add mobile resizing capabilities separately somehow?

Answer 1

Most mobile browsers don't support the CSS resize property - which is the very thing that gives you resize-able textareas.

Check out which browsers support resizing: http://caniuse.com/#search=resize

There's no simple way to "add mobile resizing". I guess you could still do it in a hacky way, but highly not recommended. The logic would probably be something like this:

1. Set resize:none.
2. Use HTML + CSS + an img (SVG) to create a little resizing tab at the bottom-right.
3. Use JS to listen for drag events (you may need a custom touch events library) on your resize tab.
4. Listener logic:
   • Increase height of element by drag-y distance if drag is downward, but don't increase beyond the CSS / style max-height.
   • Decrease height of element by drag-y distance if drag is upward, but don't decrease beyond the CSS / style min-height.
   • Similarly, increase width if drag is to the right, but don't increase beyond the set max-width.
   • Similarly, decrease width if drag is to the left, but don't decrease beyond the set min-width.
   • If the parent element is fixed width/height, don't let user resize beyond the parent dimensions.
   • If the parent is auto width/height, you may have to adjust scroll positions accordingly if the element's dimension change happen to exceed the parent's edges. (You may also have to perform some field testing to observe if changing the parent element's scrollTop/scrollLeft screws up your drag detection).

All in all, I'd say it's not worth it to implement on mobile. It's also probably good to not allow resizing on mobile, considering the limited screen real estate. As for IE/Edge browsers, wait for the CSS module specifications to finalise and MS will probably implement it.