CODEWITHSUNDEEP
javascriptjqueryhtmljquery-dialog
user1936192
user1936192

Reputation: 345

jQuery dialog dynamic height

I am looking for a way to make jQuery UI Dialog height dynamically change according to the contents.

Here is my code:

$( "#dialog-modal_"+productID ).html( "<iframe src='index.php?act=showProduct&amp;id="+productID+"' width='100%' height='100%' frameborder='0' scrolling='no'></iframe>" );

$( "#dialog-modal_"+productID ).dialog(
{
    width: 810,
    height: 590,
    resizable: false,
    modal: true,
    open: function(event, ui)
    {
    }
});


Is there anyway to do so?

Upvotes: 2

Views: 6010

Answers (2)

Brandt Solovij
Brandt Solovij

Reputation: 2134

since the example you are giving is coming from a relative path. You should be able to get the iframe's document's .height()

however you would need to do some CSS trickery to first render the iframe and get its inbrowser document height, then apply that value to your container and then surface the container once the new height is set.

something like ...

taken from here: 

var doc=document.getElementById("frame").contentDocument;

// Earlier versions of IE or IE8+ where !DOCTYPE is not specified
var doc=document.getElementById("frame").contentWindow.document;

then you would

var iframeDocHeight = $(doc).height(); // assuming it is displayed
$( "#dialog-modal_"+productID ).css("height", iframeDocHeight);

This of course relies on the basis that you have derived a way (given the rest of your page framework) to allow the iframe to render without immediately displaying it.

I would suggest a combination of position:absolute and visibility:hidden and then some js wizardry to accomplish this. without a complete rendered html doc, it wouldn't really be useful to suggest an absolute path to this beyond what I have already posted.

Essentially encapsulate the iframe in an element with overflow:hidden;display:block;height0px; , but let the iframe render fully (it will be hidden) then examine it and take measurements as necessary

Good luck!

Upvotes: 1

Mooseman
Mooseman

Reputation: 18891

Change the height to "auto". See http://api.jqueryui.com/dialog/#option-height for more info.

Upvotes: 2

Related Questions