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?

Albuminous

I just tested it in Chrome on my MotoG mobile device, and the resize functionality of the textarea seemed to work for me. Can you give more specifics for where this does not work? Thanks. – Janie

What? How do you resize it? I tried to resize it for a full 5 minutes, dragging my fingers every which way, but nothing worked... – Albuminous

How you want to resize the textarea? horizontally or vertically? – Prevent

Works for me on Win10 Chrome, up-to-date at the time of writing. – Gabrielson

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.

Retrenchment

This is no longer the case. Most mobile browsers support "resize" nowadays. – Cott

Answer 2

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/

Offal

I'm talking about manual resizing, not responsive resizing. I want to be able to make the mobile textarea bigger using my finger, just like I can use my mouse to make it bigger on the computer. – Albuminous

resize: both is what you want then, I'm pretty sure. Just beware it's not supported on IE or opera – Offal

Swiping and dragging with your finger still doesn't do anything to resize the box, even with resize: both. – Albuminous

I think I remember hearing something about how the very way you interact with mobile actually stops some elements from working properly. – Offal

Anyways, there might be a solution for it with jQuery or javascript. Sorry I couldn't help! – Offal

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/

Carolinian

Answer 4

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.

Brumbaugh

Answer 5

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>

Polished