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!


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';
| improve this answer | |
  • Thanks, but this is for lightning component I am using visual-force. how can I do it in vf? – rahul gawale Dec 3 '18 at 8:25
  • Can you paste in the html output of the component that you want changed? You can actually override the css of visualforce components quite easily. Right click and choose "view source" to get the code. – Caspar Harmer Dec 3 '18 at 16:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.