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

I don't think it can get smaller, modifying rows/cols in CSS doesn't change its look. You can make it bigger though (using above properties), and set it to be dependent on screen size. See:

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Answer 2

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.

Answer 3

You can use resize property for textarea which works fine in all browsers except IE. To make compatible with all browsers you can use below Jquery UI plugin to achieve the same.

http://jqueryui.com/resizable/

Answer 4

The resizers display according to the width of the scroll bar. So make the scroll bar wider.

.enter image description here

• Example: In reactjs. I have a jsx and css width scroll bar
• This way you can have the resizer look bigger on mobile screens

.textarea::-webkit-resizer {
  background-image: url('../../public/images/ResizeIndicator.svg');
}

textarea::-webkit-scrollbar {
  overflow: hidden;
}

.textarea::-webkit-scrollbar {
  width: 14px;
  display: hidden;
}

.textarea {
  resize:vertical;
  overflow-y: scroll;
}

<div className="relative textarea min-h-[75px] border border-[#D0D4D9] rounded">
  <textarea className="resize-none outline-none w-full h-full text-base font-normal       leading-[23px] bg-white p-3 "
  placeholder="Share with us your experience"
  name="feedback"
  onChange={formik.handleChange}
  maxLength={500}
  />
</div>

Answer 5

You can use the jQuery UI Touch Punch library (http://touchpunch.furf.com)

jQuery UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI user interface library.