Tuesday, January 17, 2012

JQuery UI Dialog Auto Width and Height Cross Browser (Fixed IE issue)

JQuery Dialog is one of my most used UI components.  However, the width: 'auto'; and height: 'auto'; options are not supported in IE, which means if you set them to 'auto', the dialog will expand to take the full window width and height will be undetermined.
I have searched around the web and see many people having the same issue but no solutions. Luckily, I was able to find a way to make it work.  Here is how:

1. Create a wrapper element (i.e. div) around your dialog content.

....Actual Dialog Contents....

2. Add the following style on the page

 
This is the key part. IE does not calculate the actual width if you don't specify a width value initially, it will use the browser window width instead. By giving IE an initial width value, it will set it to the proper value. The IE check here is necessary, because this should only be applied to IE. If you do not do IE check, FF and Chrome will use the width and height value as the result dialog width and heigth.

3. Finally, add the following javascript code on the page.

if($.browser.msie){
   //Get the acutal width and height and add some margin
   var w = $("#my_dialog #wrapper")[0].clientWidth + 20;
   var h = $("#my_dialog #wrapper")[0].clientHeight + 20; 
   $("#my_dialog").dialog('option', {'width':w,'height':h});
}
This piece of code will find the actual width and height and update the dialog to the current width and height.

Let me know if you encounter any issue with this solution. :)

8 comments :

  1. Replies
    1. Great Article IoT Projects for Students

      Deep Learning Projects for Final Year

      JavaScript Training in Chennai

      JavaScript Training in Chennai

      The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training

      Delete
  2. It seems a simple solution, but I would not come to him. Thank you for sharing
    Richard Brown secure virtual data room

    ReplyDelete
  3. And you still do not know, with a casino you always win gorgeous online casino reviews so run here as soon as possible

    ReplyDelete