Thursday 8 December 2016

Automatic resizing of modal dialogs

The modal dialogs are a very nice feature, easy to use and well integrated in the Apex framework. One thing that annoys me is the vertical sizing of the dialog window.
Normally I will create a page as a Modal dialog. When running it I notice that the window is way too high or not high enough. I go back to the builder and enter a number of pixels for the height and look what the result is. I repeat this process a few times until I am satisfied.



When the page is changed this may  change the height of the page, so... :-(.
This is typically one of these boring jobs I like to automate. So I examined the structure of the Apex modal dialog.
One thing that is counter intuitive is that the header of the modal dialog is part of the calling page. Only the red part is generated from the modal dialog page.


The height of the modal window is defined in the calling page. This is the reason why you have to refresh the calling page when you change the height of the modal dialog.

Inside the red square the height is determined by three div elements: dialog header, dialog body and dialog footer.
The JavaScript code below determines the total height of the dialog and sets the height of the determining element on the calling page to this value.

function resize_dialog()
{
  var header  = $('.t-Dialog-header');
  var height  = parseInt($(header).height());  
    
  var body    = $('.t-Dialog-body');
  var padding = parseInt($(body).css('padding-top')) + parseInt($(body).css('padding-bottom'));
  height += padding;
    
  var container = $(body).children().first();
  height   += parseInt($(container).height());  
    
  var footer    = $('.t-Dialog-footer');
  height   += parseInt($(footer).height());  
  console.log('total height = '+ height );

  parent_container = window.parent.$('.ui-dialog-content');
  $(parent_container).height(height);
}


This code can be called in the On page load section of the dialog page.


It is also possible to call the function in a Dynamic Action that changes the height of the dialog content. Two examples of this behavior can be seen in the example page here. You can change the number of rows or number of items and the dialog is resized automatically.

Happy Apexing!





8 comments:

Anonymous said...

You can check APEX 5.1 EA2 realization, the problem is fixed there.

Anonymous said...

Hi Dick

Please see changes to Pretius APEX Enhanced Notifications (https://apex.world/ords/f?p=100:710:6966606583089::::P710_PLG_ID:apex.ehnanced.notifications) plugin.

https://apex.oracle.com/pls/apex/f?p=10695

What do you think?

Anonymous said...

Hi Dick,
I tried this for an modal page with interactive grid and it did not work.
Any thoughts?
Thanks

Dick Dral said...

From your information I cannot determine what the problem might be.
The code works for modal dialog pages, not for inline dialogs.
The code should execute after the page is rendered. On Page Load is a good moment.

You could post your example on apex.oracle.com, then I can have a look at it.

Regards,
Dick

Brad said...

From your example, please define the calling page. Is it the page where the button is localed (clicked would open the modal)? Or is the modal page itself the calling page?

Dick Dral said...

Hi Brad,

The calling page for me is the page where the button is located.

Brad said...

Thanks for the quick response. With APEX 20.2 we are having trouble getting modals to resize. I'm hoping this will solve the problem

Brad said...

I cannot put the resize-dialog function on the calling page. I get a JS error (resize_dialog is not defined) in the browser console.