manually make jQuery dialog check if resize is needed

Question

I have a jQuery dialog that loads its content trough ajax after its opened.

See this JSFiddle (content is not loaded trough ajax but added after open, which is enough to demonstrate my problem).

html:

<div id="test">test</div>

js:

$("#test").dialog({
    minHeight:100,
    maxHeight:200,
    width:300,
    open: function(){
        $(this).html("test<br /><br />test<br />" +
                     "<br />test<br /><br />test" +
                     "<br /><br />test<br /><br />" +
                     "test<br /><br />test<br />" +
                     "<br />test<br /><br />test");
    }
});

When it is opened it does not stay true to its maxHeight until you resize the dialog. Is there some sort of resize method I can call after I added content to the dialog?

I prefer not to have to manually figure out if a resize is needed and how high since its pretty much already built into the ui plugin.

Answer 1

JSFiddle example.

Not exactly the elegant solution I hoped for but so far it seems to work.

If anybody has a better solution I'll be glad to hear it.

Answer 2

Put the html code in an actual div on the webapge, then use dialog on that div. Or to change height (and other options) after init ... from jquery docs :

//getter
var width = $( ".selector" ).dialog( "option", "height" );
//setter
$( ".selector" ).dialog( "option", "height", 460 );

Answer 3

Setting the maxHeight in the open function seems to do the trick:

$("#test").dialog({
    minHeight:100,
    width:300,
    open: function(){
        $(this).html("test<br /><br />test<br /><br />test<br /><br />test<br /><br />test<br /><br />test<br /><br />test<br /><br />test<br /><br />test");
        $(this).parent().css("height", "auto");
        $(this).css("maxHeight", 200);
    }
});

EDIT: It appears when the 'test' div is used as a dialog it becomes nested within the dialog div along with a header div. As a result both the test div and its containing div need to have their heights set with the containing div taking into account the height of the dialog header div. Setting its height to auto should take care of this.