HTML Variable auto collapsing and not expanding to show contents

[litchick10]

I have a catalog item HTML variable that is populated via script.  It keeps auto collapsing and even when expanded does not show entire contents (see images).  I need this to auto expand to the size of the contents.

Here is the script that populates this variable: 

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue == '') {
        return;
    }

    var n_type = '';
    var r_type = newValue;
    var sysID = g_form.getValue('notary_sys_id');
    var status = g_form.getValue('commission_status');
    var instructions = '<table style="border:1px Solid #4D5656; background:#F4F6F7;"><tr><td><p><strong>IMPORTANT:</strong></p>You will receive emails and reminders throughout this process from <strong>MyRedactedService (MyService@app.Redactedbank.com) </strong>please be sure to look for these emails&nbsp;</p><p>&nbsp;</p><p><span style="font-size:10pt;"><strong>INSTRUCTIONS </span>- <span style="color:red;"><i>Please read all instructions carefully<i></span></p><hr style="border: 1px solid #4D5656;" />';
    if (r_type == 'add') {

        g_form.clearValue('notary_sys_id');
        g_form.clearValue('commission_status');
        g_form.clearValue('process_expiration');
        g_form.clearValue('commission_name');
        g_form.clearValue('nna_physical_address');
        g_form.clearValue('nna_mail_address');
        g_form.clearValue('nna_previous_commission_id');
        g_form.clearValue('nna_previous_commission_expiration');
        g_form.clearValue('cost_center');
        g_form.clearValue('application_date');
        g_form.clearValue('nna_completed_info');
        g_form.clearValue('training_completed');
        g_form.clearValue('exam_completed');
        g_form.clearValue('exam_expiration');
        g_form.clearValue('commission_id');
        g_form.clearValue('commission_expiration');
        g_form.clearValue('oath_mailed');
        g_form.clearValue('attestation_received');
        instructions = instructions + '<p>Once you have submitted your request to become a notary your manager must approve the request in MyRedactedService, your order will be then submitted by the Notary Administrator.&nbsp;</p><p><strong>If approved:</strong></p><p>- Within one business day, the notary administrator will register your info with the National Notary Association (NNA)&nbsp;</p><p>- Within two business days, You will receive an email with seminar information and next steps within one day of registration.&nbsp;Emails from the National Notary Association (NNA) will come from </span><strong>NationalNotary.org</strong> be sure to check your junk mail . NOTE:&nbsp;</span>Changes to seminar dates and place must be made with Trusted Notary directly.</p><p>- The entire process must be completed within 60 days of your NNA Notary registration date</p><p>&nbsp;</p><p><strong>If rejected </strong> - it is because of one of these reasons:</p><p>- You have not been employed at the bank for more than 90 days<br />- Your manager did not respond to the approval request within 30 days<br />- Your manager rejected your request to become a notary</p><p>&nbsp;</p><p>If you have any questions please send them to <a href="mailto:%20notarymanagement@Redactedbank.com" target="_blank" rel="noopener noreferrer nofollow">notarymanagement@Redactedbank.com</a></p><p>&nbsp;</p></td></tr></table>';
    } else if (r_type == 'edit') {
        if (status == 'pending') {
            n_type = 'instructions';
        } else {
            instructions = instructions + '<p>Please note updates made here do not udpate your National Notary (NNA) registration, please contact your notary admin at <a title="notarymanagement@Redactedbank.com" href="mailto:%20notarymanagement@Redactedbank.com" target="_blank" rel="noopener noreferrer nofollow">notarymanagement@Redactedbank.com</a> to request NNA updates</p></td></tr></table>';
        }
    } else if (r_type == 'renew') {
        n_type = 'instructions';
    } else {
        n_type = '';
    }
    g_form.setValue('instructions_lbl', instructions);
    if (n_type == 'instructions') {
        var sysIDType = sysID + ',' + n_type;
        var gr = new GlideAjax('NotaryInstructions');
        gr.addParam('sysparm_name', 'getNotification');
        gr.addParam('sysparm_query_sysIDType', sysIDType);
        gr.getXML(getInfo);
    } else {
        instructions += '</td></tr></table>';
    }


    function getInfo(response) {

        var answer = response.responseXML.documentElement.getAttribute("answer");
        if (answer) {
            var longinstructions = '<table style="border:1px Solid #4D5656; background:#F4F6F7;"><tr><td><p><strong>IMPORTANT:</strong></p>You will receive emails and reminders throughout this process from <strong>MyRedactedService (MyService@app.Redactedbank.com)</strong>please be sure to look for these emails&nbsp;</p><p>&nbsp;</p><p><span style="font-size:10pt;"><strong>INSTRUCTIONS </span>- <span style="color:red;"><i>Please read all instructions carefully<i></span></p><hr style="border: 1px solid #4D5656;" />';
            longinstructions += answer.toString() + '</td></tr></table>';
            g_form.setValue('instructions_lbl', longinstructions);
        }
    }
}

What I've tried

• Set the container to auto expand
• Set the variable to auto expand - both isolate & non isolate, both on load and on change 

    var field = g_form.getControl('instructions_lbl');
    if (field) {
        field.style.height = 'auto'; // Or specific pixels like '400px'
    }​

• Set the variable to a the max pixels of the field - both isolate & non isolate, both on load and on change

    var fieldName = 'instructions_lbl';
    var el = g_form.getControl(fieldName);
    el.style.height = el.scrollHeight + 'px';​

I could really use some help on this one

[litchick10]

I did figure out a work around...setting the default value as a bunch of blank rows auto expands and when the info populates, it is auto expanded. 

Not exactly ideal solution so I'm all ears for a more dev specific solutions

[Ankur Bawiskar]

@litchick10 

Glad to know.

Do mark your own response as correct so that it helps future members.

[lauri457]

The tinymce editor is initialized on the textarea element that you get from g_form.getControl. The library then sets display as none on the textarea and mutates the dom to create whatever is needed for the editor. 

To edit the height of the container you need the element after what getcontrol returns

g_form.getControl("instructions_lbl").nextElementSibling.style.height = "100px"

[Tanushree Maiti]

Try this options:

Option 1) 

• Configure Dictionary of that  HTML field
• Click Advance View
• Set Attribute as "editor.height=250"
• Click Update
• Reload form

Option 2) Add a record to the sys_ui_style table for the instructions_lbl field (HTML type), setting the style to "height:100%". This approach works for both active and inactive cases

Option3 ) Use TinyMCE - how to make most of it?

Refer:

https://www.servicenow.com/community/servicenow-ai-platform-forum/change-the-default-quot-size-quot-...