How to specify maxWidth and maxHeight in using SimpleModal

When I call the simplemodal method, I do that like so:

jQuery("#stats").modal({
    maxWidth: 400,
    maxHeight: 300,
    onOpen: function (dialog) {
        dialog.overlay.fadeIn('slow', function () {
            dialog.data.hide();
            dialog.container.fadeIn('slow', function () {
                dialog.data.slideDown('slow');
            });
        });
    },
    onClose: function (dialog) {
        dialog.data.fadeOut('slow', function () {
            dialog.container.hide('slow', function () {
                dialog.overlay.slideUp('slow', function () {
                    jQuery.modal.close();
                });
            });
        });
    }
});

However, when the modal is rendered, both max values are ignored. The resulting element with inline styles is

<div id="simplemodal-container" 
     class="simplemodal-container" 
     style="height: 697px; width: 1861px; left: 231px; top: 85.5px; position: fixed; z-index: 1002;">

Is there an issue with the way I specified the max values? Or, is there an issue with simplemodal?

Thanks! E

Solution

I think those min/max settings are used to just set the actual height/width for SimpleModal. The modal's container will be sized according to the content as long as the content's size is within the min/max settings. Otherwise, the modal container size will be set at to the min/max values. That's all it does. For example, if the content is bigger than maxHeight & maxWidth settings, then there will be scroll bars:

See this fiddle here

Your content

<div id="stats" style="width:400px; height:400px;">
    Your content will show in modal with scroll bars, 
    because it is bigger than maxWidth, maxHeight.
</div>

The modal

jQuery("#stats").modal({
    maxWidth: 300,
    maxHeight: 300,
    minWidth: 100,
    minHeight: 100,  
    ...

If you don't want the modal to shrink/expand with the content, you can force the modal to stay at a specified width & height. Some people even swap out classes (one for normal modal, one for long modal, etc.):

#simplemodal-container {
    height: 360px;
    width: 600px;
}

If you dynamically change the content of the div (like from an ajax call) you can also do this:

$("#simplemodal-container").css('height', 'auto'); //Resets container height
$("#simplemodal-container").css('width', 'auto');  //Resets container width
$(window).trigger('resize.simplemodal');           //Refresh the modal dialog