Cannot resize width of Text Area on click and drag in LEX

Question

I am using visualforce page with inputfield, I have field segment which is of type 'long text', that corner button on down right corner of input field(refer above image), we can click and drag both width and height in classic, but in LEX only height is changing. Can we enable height change too? TIA!

Answer 1

If you use my version, which you can get here, you can adjust this parameter easily.

While the default setting of my one also resizes vertically only, you can change this line:

.THIS.dynamic-textarea:focus {
    resize: vertical;
}

To this:

.THIS.dynamic-textarea:focus {
    resize: both;
}

Also, if you ever want to make your own version, the key method that you need is the setHeight method, which measures the scrollheight of the texarea so it can resize accordingly:

setHeight: function(component) {
    var el = document.getElementById(component.getGlobalId() + '-textarea');
    // compute the height difference which is caused by border and outline
    var outerHeight = parseInt(window.getComputedStyle(el).height, 10);
    //3 pix is just a tiny static extra buffer. Adjust if necessary
    var diff = (outerHeight - el.clientHeight) + 3;

    // set the height to 0 incase it needs to be set smaller
    el.style.height = 0;

    // set the correct height
    // el.scrollHeight is the full height of the content, not just the visible part
    el.style.height = Math.max(60, el.scrollHeight + diff) + 'px';
}