jquery simplemodal dynamic height

Question

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
        },

Answer 1

var h = $(your_content_element).css('height');

$("#popup").modal({
        containerCss: {
            width: 550,
            height: h
        },

Then you have to find a way that when you trigger the modal, the script calculate the height again.

Answer 2

Leaving the height out defaults it to auto height. If you destroy the dialog and then immediately recreate it the auto height should essentially resize it for you. It a hack work around but probably easier than trying to calculate the appropriate height manually. It would be nicer to have an autoresize option in dialog but...

Answer 3

SimpleModal does not have a built in feature that adjusts height/width when the content changes. This is something you'd have to add.

Answer 4

in jquery.simplemodal.js, overwrite the

containerCss:{}

by this one:

containerCss:{width: 650}

change the css images the top and bottom gif file.

by Arman de Guzman de Castro :-)

Answer 5

I was able to accomplish this by memoizing the dialog parameter that is passed in to the onShow event handler, then when some later event causes content to change, manipulate the dialog.container's css height property:

<script type="text/javascript">
var walkInDlg;
function doModal()  { // called from onClick of some button on the page
    jQuery.modal("#aModal", { height:"auto",
        width:500,
        backgroundColor:"#807c68",
        overlay:75,
        onShow: function(dlg) { walkInDlg = dlg },
        onClose: function(dlg) { walkInDlg = undefined; jQuery.modal.close() },
        containerCss:{border:"0",padding:"0"}
    })
}
</script>

...

// somewhere else in the page
// this is in the event handler for an action that
// adds content to the dialog

...
// after adding the content, do this:
jQuery(walkInDlg.container).css('height', 'auto')

witnessed this technique working in Chrome and Firefox.

Answer 6

Hi, 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.

Answer 7

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')
}});

Answer 8

Hi!

I have the same problem, but with IE...

Any suggestion?

Regards, Pedro Martins