HTML fields in Catalog Variables, attempting to change height

[tahnalos]

I have been tasked with modifying a bunch of HTML Catalog Variables on a Catalog item.  The client wants the default height of these HTML fields to be a lot smaller so that they would look better when being used in our Service Portal.

I did find this solution but I haven't tested this out yet:

var form = typeof g_sc_form != "undefined" ? g_sc_form : g_form;
var myControl = form.getControl("VARIABLE_NAME");
myControl.style.height = '100px';

Someone said that this is actually DOM manipulation and that this is not recommended by ServiceNow.  Is it?  I am not aware as to what DOM manipulation is.

And if ServiceNow does not recommend this approach, then what approach is there to change the height of these HTML fields?

[AshishKM]

Hi @tahnalos 

Yes, using client scripts to modify the style attributes of HTML elements, such as setting the height of an HTML field, is considered DOM (Document Object Model) manipulation.

You can use a combination of ServiceNow’s Portal Widget Editor and CSS.

• Service Portal > Portal Themes
• Open the theme that you are using for portal
• In the CSS section, you can add custom styles for HTML fields

Try this if it works for you.

-Thanks,

AshishKM

[vams1]

Hello @tahnalos ,
Try thease -

Instead of direct DOM manipulation, ServiceNow recommends CSS styling via Service Portal theme or UI policies.

You can define a custom CSS rule within your Service Portal theme to modify the specific catalog variables.

1. Go to Service Portal > Portals.
2. Open your portal and navigate to CSS Includes.
3. Add a new CSS file or use existing and add your custom styles.
   textarea[name="VARIABLE_NAME"] {
   height: 100px !important;
   }
   or Use onload catalog client scripts too
   

   function onLoad() {

       var field = g_form.getControl('your_variable_name'); //Replace with your variable name

       if (field) {

           field.style.height = '100px'; // Adjust the height as needed

       }

   }

   Try this 

   -Thanks,

   Vamsi G

   
   Please mark this response as correct and helpful if it helps you can mark more that one reply as accepted solution

[vams1]

Hello @tahnalos ,
Try thease -

Instead of direct DOM manipulation, ServiceNow recommends CSS styling via Service Portal theme or UI policies.

You can define a custom CSS rule within your Service Portal theme to modify the specific catalog variables.

1. Go to Service Portal > Portals.
2. Open your portal and navigate to CSS Includes.
3. Add a new CSS file or use existing and add your custom styles.
   textarea[name="VARIABLE_NAME"] {
   height: 100px !important;
   }
   or Use onload catalog client scripts too
   

   function onLoad() {

       var field = g_form.getControl('your_variable_name'); //Replace with your variable name

       if (field) {

           field.style.height = '100px'; // Adjust the height as needed

       }

   }

   Try this 

   Thanks - Vamsi G

   
   Please mark this response as correct and helpful if it helps you can mark more that one reply as accepted solution