How to set size of GlideModalForm?

[John Rissone]

I'm using GlideModalFormV3 and there doesn't seem to be a way to size the thing as there are no documented APIs to do this.

https://developer.servicenow.com/app.do#!/api_doc?v=newyork&id=c_GlideModalFormV3API

We can hack it via the callback and add the class "modal-lg" to the ".modal-dialog" node, but then the modal snaps after it loads to the smaller size and looks terrible.

With the new SN mandate to not use Jelly UI Pages, I'm out of ideas. 

[FN510]

Try using DOM manipulation straight after rendering the GlidemodalForm

var dialog = new GlideModalForm('My popup form', 'table_name');
...
dialog.render();
// set size and center after render
jQuery('#table_name').find('.modal-content').first().css({'margin':'0 auto', 'width': '50%'});

(Check 'isolate script' to use jQuery)

[Joe72]

Alas, DOM manipulation is the only way to accomplish a resize with GlideModalForm. If you're going to go in this direction, make sure to use the setOnloadCallback function:

gm.setOnloadCallback(function() {
   //I like to remove the page timing div to make the modal cleaner
   jQuery("#dialog_frame")[0].contentWindow.jQuery("#page_timing_div").hide();
   //Resize the modal window
   jQuery(".modal-content").css("width", "50%").css("margin", "0 auto");
});
gm.render()

Of course, that will cause the window to resize after it's already been loaded, which doesn't look great. So if you're going to head down this direction, I would probably inject the css first to avoid seeing the resize at all.

Here's a UI Macro that accomplishes this. (Macros/Formatters are a great way to introduce CSS to forms.)

<span class="btn btn-default icon-add" title="Enter a Task Order" onclick="openNewTaskOrder()" />

<style>
   #u_task_order .modal-content { width: 50% !important; margin: 0 auto !important;
</style>		

<script>
   function openNewTaskOrder() {			
      var gm = new GlideModalForm('Enter new Task Order', 'u_task_order');
      gm.render();
   }
</script>