jquery simplemodal dynamic height

Admin 1
Viewed 23938

I'm using the simplemodal popup in jquery, and I would like to set the height of my popup dynamically depending on my content. Currently, it is fixed at 500. If I remove the height property, then it works the first time, but if the content grows, then the height doesn't adjust itself (I have tabs within my popup and each tab loads different content).

$("#popup").modal({
        containerCss: {
            width: 550,
            height: 500
        },
simplemodal jquery-plugins jquery
14 Answers

I can have dynamic height (only tested on chrome and ff) by adding this function to last line of onShow:

$('#simplemodal-container').css('height', 'auto');

hope this could help. If you specify a containerId, you should replace the '#simplemodal-container' with your containerId.

user_2311560

The difficulty with some of the solutions here, i.e. setting height auto, is that you lose simplemodal's nice behaviour to keep the modal smaller than the current window size (by setting maxHeight to 90%, for example).

I have come up with the following solution:

 $.modal.defaults.onShow = function(dialog) {
   if (!dialog) dialog = $.modal.impl.d
   dialog.container.css('height', 'auto');
   dialog.origHeight = 0;
   $.modal.setContainerDimensions();
   $.modal.setPosition();
  }

The essence of this is that once you run setContainerDimensions on an active modal it will not recalculate them if you pull in new content, even with an explicit call to setContainerDimensions. What I do here is get round the remembered height and force the recalculate.

You will of course have to call $.modal.defaults.onShow each time you change the content (ajax call, tab change etc) but you can keep the autoResize and autoPosition capabilities whilst avoiding unnecessary scrollbars.

user_2560140

I combined Sahat's and Tommy's answer to get this shorter version. I tested it in Firefox and it works:

$.modal("<p>yourContent</p>", { onShow: function(dlg) {
    $(dlg.container).css('height','auto')
}});
user_1612570
Related