jquery dialog autosize [modified]

[fififlowertot]

Hi, I have a jquery dialog which loads another aspx page inside iframe. I want dialog to resize as per the contents inside Iframe. Tried setting

width:'auto' and autoResize: true

in the dialog constructor but no luck.

modified on Wednesday, August 24, 2011 9:25 AM

[Gerben Jongerius]

You will have to create some javascript yourself to build this. First you will have to attach an event to the onload of the iframe. In that onload function you will have to try to calculate the height of the contents and resize the jQuery dialog window. I built something similar a couple of months back, but it didn't work equally well in all scenario's.

// title, url, name, ok_title, width, height <-- these were input variables for my code
var popup_div = document.createElement('div');
var popup_content = document.createElement('iframe');
var dialog = null;
jQuery(popup_content).css({ 'width': '100%', 'height': '100%', 'border': 'none', 'visibility': 'hidden' });
popup_content.src = url;
popup_content.name = name;
popup_div.id = 'bb-dialog';
popup_div.appendChild(popup_content);
document.body.appendChild(popup_div);

  jQuery(popup\_content).bind('load', function () {
    height = height == 'auto' ? jQuery(top.window.frames\[name\]).height() : height,
    width = width == 'auto' ? jQuery(top.window.frames\[name\]).width() : width;

    jQuery(popup\_div).dialog({
      show: 'fade',
      hide: 'fade',
      title: title,
      modal: true,
      position: 'center',
      width: width,
      height: height,
      closeOnEscape: false,
      close: function () { this.parentNode.parentNode.removeChild(this.parentNode); },
      open: function () { jQuery(popup\_content).css('visibility', 'visible'); },
      buttons: button\_set
    });

    jQuery(this).unbind('load');
  });

Try it out and see if it works for you. Though you might have to tweak it a little bit.