GlideDialogWindow setSize and removeCloseDecoration on Fuji

kenny_vl1 · ‎11-02-2015

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.

ChrisBurks · ‎11-03-2015

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

Kalaiarasan Pus · ‎11-02-2015

Yes the UI page. What I would suggest for now is, remove the getMessage's and hardcode the messages in the UI page. Do not give size in the glidedialogwindow and check.

kenny_vl1 · ‎11-02-2015

Thanks for thinking with me, BTW !

I just tried that and here's the result with the setSize :

Without the setSize:

There's clearly no difference between passing the text as string or as UI message.

Kalaiarasan Pus · ‎11-02-2015

Stumped. Let's wait for someone to kick in here.

Obviously we missing something.

arobertson · ‎11-02-2015

I had exactly the same issue a while back and it was down to the HTML table's width, height & rows in the UI page.

kenny_vl1 · ‎11-03-2015

What you are saying, sounds very plausible. Although I can make changes in width by changing the XML-tag for the table, I don't see how I can set the height or rows. Perhaps you can give me a pointer on that part?

Besides from that, I was actually thinking that the rows were already being set here:ial_c

<g:ui_multiline_input_field rows="20" readonly="true" name="dial_comments" id="dial_comments" label="${gs.getMessage('disclamer_sub_title')}" value="${gs.getMessage('disclamer_terms')}" mandatory="true" />

Here's my entire html for this ui page:

<g:ui_form>

     <!-- Set up form fields and labels -->

   <table width="100%">

         <tr>

             <td>

                 <!-- Get 'disclamer_sub_title' to use as label and 'disclamer_terms' from UI messages to use as text -->

                 <g:ui_multiline_input_field rows="20" readonly="true" name="dial_comments" id="dial_comments" label="${gs.getMessage('disclamer_sub_title')}" value="${gs.getMessage('disclamer_terms')}" mandatory="true" />

             </td>

         </tr>

         <tr id="dialog_buttons">

               <td colspan="2" align="right">

                     <!-- Pull in 'dialog_buttons_ok_cancel' UI Macro for submit/cancel buttons.

                   'ok' option will call the 'validateComments' Client script function from the UI Page-->

<g:dialog_button onclick="history.go(-1);return false;" name="cancel_button" id="cancel_button">${gs.getMessage('disclamer_reject')}</g:dialog_button>   

<g:dialog_button onclick="return validateComments()" name="ok_button" id="accept_button">${gs.getMessage('disclamer_accept')}</g:dialog_button>   

               </td>

         </tr>

   </table>