CODEWITHSUNDEEP
jqueryjquery-pluginssimplemodal
Swami
Swami

Reputation:

jquery simplemodal dynamic height

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

Upvotes: 19

Views: 24072

Answers (14)

id614515
id614515

Reputation: 197

.modal({
   autoResize:true,
   maxHeight: $(window).height(),                
   minHeight: $(window).height() - 100               
});

Upvotes: 0

Tyler Rafferty
Tyler Rafferty

Reputation: 3428

Here is a simple way to dynamically adjust the height and/or width of Eric Martins Simple Modal. I am just calling to open a modal after the '.something' is clicked. I measure the window height/width and subtract(px or div(height)). I then set the width/height with the dynamically created variable(s) 

    $('.something ').click(function() {
        //Dynamically Get Height/Width of the Window
        var wh = $(window).height() - 100 
        var ww = $(window).width() - 100 
           //Can subtract other divs heights if wanted
           //var dh = $('#exampleDiv').height();
           //dh = ( wh - dh );    
        $('#modalThis').modal({
            containerCss : {                
                height : wh,
           //or height : dh             
                width : ww

            },
        });
    });

Upvotes: 0

Will Henderson
Will Henderson

Reputation: 502

Building off of dmnc's answer, I was able to get this working by adding the code to the onOpen function, in the callback for the container fadeIn.

There's a bit of a position jump as content renders, but it resizes and recenters perfectly for me now.

$('#target').modal({
    overlayClose: true,
    onOpen: function (dialog) {
        dialog.overlay.fadeIn('fast', function(){
            dialog.data.hide();
            dialog.container.fadeIn('fast', function(){
                dialog.data.fadeIn('fast');

                // where the magic happens
                dialog.container.css('height', 'auto');
                dialog.origHeight = 0;
                $.modal.setContainerDimensions();
                $.modal.setPosition();
            });
        });
    },
    onClose: function (dialog) { ... }
});

Upvotes: 0

rtcardoso
rtcardoso

Reputation: 111

Put this in your css file:

.simplemodal-container
{
    height:auto !important;
}

Upvotes: 5

arturocr
arturocr

Reputation: 21

here is my solution:

var activeModal;
$.extend($.modal.defaults, {
    onShow: function(dialog) {
        activeModal = dialog;
        dialog.container.css('height', 'auto');
    }
});
function showModal() { // Creates a modal
    $.modal("#aModal");
}
...
function changeModalContent() { // A function that changes the modal content
    ...
    // After changing the content, do this:
    $.modal.update(activeModal.data.css('height'), 'auto');
}

I tested it on FF, Chrome, Safari and Opera.

Hope it works for you too...

Regards!

Upvotes: 2

dmnc
dmnc

Reputation: 811

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.

Upvotes: 12

Manic
Manic

Reputation: 1

Here is what I do:

    $.extend($.modal.defaults, {
    closeClass: "close",
    closeHTML: "<a></a>",
    minWidth: 400,
    minHeight: 200,
    maxWidth: 780,
    maxHeight: 580,
    onShow: function (dialog) {
        dialog.container.css("height", "auto");
    }
});

Upvotes: 0

Arman de Guzman de Castro
Arman de Guzman de Castro

Reputation: 1

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 :-)

Upvotes: -2

HRJ
HRJ

Reputation: 17777

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

Upvotes: 7

Sh4m1l65
Sh4m1l65

Reputation: 609

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.

Upvotes: 1

Sahat Tambunan
Sahat Tambunan

Reputation: 199

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.

Upvotes: 19

Eric Martin
Eric Martin

Reputation: 2841

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

Upvotes: 3

Hector Scout
Hector Scout

Reputation: 1408

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

Upvotes: 1

yoda
yoda

Reputation: 10981

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.

Upvotes: 0

Related Questions