You are viewing limited content. For full access, please sign in.

Question

Question

Auto-Sizing Custom HTML Field (Continued)

asked on October 30, 2017

I have been working on some JavaScript to automatically resize all multi-line fields depending on how much text is entered.  It works when you type the text in or paste it in.  

It does not work if the field is populated by text from a lookup when the form loads.  I can cut and paste the text back in and it resizes automatically.

 

// Applied globally on all textareas with the "cf-medium" class
$(document)
    .one('focus.cf-medium', 'textarea.cf-medium', function(){
        var savedValue = this.value;
        this.value = '';
        this.baseScrollHeight = this.scrollHeight;
        this.value = savedValue;
    })
    .on('input.cf-medium', 'textarea.cf-medium', function(){
        var minRows = this.getAttribute('data-min-rows')|0, rows;
        this.rows = minRows;
        rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 17);
        this.rows = minRows + rows;
    });

Any help will be appreciated.

 

0 0

Replies

replied on October 31, 2017

If you trigger the adjustments on the field's change event it should solve your problem. Lookups do not trigger events like focus, keypress, etc., but they should cause a change event to fire.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.