GlideDialogWindow setSize and removeCloseDecoration on Fuji

kenny_vl1
Kilo Expert

An onLoad catalog client script was created, which calls a dialog window.

function onLoad() {

  var dialog = new GlideDialogWindow("sc_cat_item_disclamer"); //create "Terms and Conditions" dialog window

  dialog.setTitle(getMessage('disclamer_title')); //Set the dialog title

  dialog.setSize(600,600); //Set the dialog size

  dialog.removeCloseDecoration(); //remove the close cross from the dialogwindow

  dialog.render(); //Open the dialog

}

I included the setSize method for future compatibility with Fuji.

In Eureka, I don't see the 'CloseDecoration' and the sizes are set as defined in the script. Just as expected.

In Fuji environment I am seeing the CloseDecoration and only the width is being adjusted according to the setSize. The height does not change. This is not at all what I expected.

It seems that the removeCloseDecoration is not working and neither is the height parameter from the setSize method.

function onLoad() {

  var dialog = new GlideDialogWindow("sc_cat_item_disclamer"); //create "Terms and Conditions" dialog window

  dialog.setTitle(getMessage('disclamer_title')); //Set the dialog title

  //dialog.setSize(600,600); //Set the dialog size

  dialog.setWidth(600); //Set the dialog width

  dialog.setHeight(600); //Set the dialog height

  dialog.removeCloseDecoration(); //remove the close cross from the dialogwindow

  dialog.render(); //Open the dialog

}

I have tried splitting up the width and height methods for testing purposes, but now the dialog window just keeps loadin and doesn't render.

When I remove the height, the dialog window renders fine.

Has anyone else already experienced similar behaviour? I am thinking this could very well be a bug in Fuji.

1 ACCEPTED SOLUTION

The ui_multiline_input_field is a textarea element. Whether using ServiceNow or any webpage it needs to have a size setting placed on it. By default a textarea element renders in a fixed sized. Unlike a div it doesn't change its size based on the text content within it. The size has to be set or scripted to dynamically grow.


So you have to take that into consideration when using a textarea in combination with a table element. Although a set size is placed on a table the cells within a table by default grows in size based on it's content. If a textarea is the only element used within a table cell then the table cell's size is based on the textarea's dimensions. And it's default padding and margin properties. All elements have a default padding and margin size.


If you're on Eureka I would try leveraging some of the bootstrap styling that the ServiceNow platform provides. Or try displaying your text in the table cell without the ui_multiline_input_field.


Tables are an easy way to organize the display but since bootstrap is on the platform there are more modern ways to get a nice visual display.



I hope that helps.


View solution in original post

25 REPLIES 25

The ui_multiline_input_field is a textarea element. Whether using ServiceNow or any webpage it needs to have a size setting placed on it. By default a textarea element renders in a fixed sized. Unlike a div it doesn't change its size based on the text content within it. The size has to be set or scripted to dynamically grow.


So you have to take that into consideration when using a textarea in combination with a table element. Although a set size is placed on a table the cells within a table by default grows in size based on it's content. If a textarea is the only element used within a table cell then the table cell's size is based on the textarea's dimensions. And it's default padding and margin properties. All elements have a default padding and margin size.


If you're on Eureka I would try leveraging some of the bootstrap styling that the ServiceNow platform provides. Or try displaying your text in the table cell without the ui_multiline_input_field.


Tables are an easy way to organize the display but since bootstrap is on the platform there are more modern ways to get a nice visual display.



I hope that helps.