JQuery UI dialog only resizing horizontally, not vertically

Question

I am trying to create a JQuery dialog that resizes with the window, I can get it to resize horizontally, but the vertical size never seems to change, code is below:

var dlg = $("#dialog"); // Get the dialog container.

dlg.dialog({
    title       : '',
    bgiframe    : true,
    draggable   : false,
    resizable   : true,
    dialogClass : 'dialogRecurso',
    width       : $(window).width(),
    height      : $(window).height(),
    stack       : true,
    zIndex      : 99999,
    autoOpen    : false,
    modal       : true,
    open        : function() {
      $(".ui-dialog-titlebar").hide();
    }
});

$(window).resize(function() {
    $("#dialog").dialog("option","height",$(window).height());
    $("#dialog").dialog("option","width",$(window).width());
});

Any idea why its not growing vertically? I verified that the resize function is getting called and that the dimensions are correct, but after the dialog is created the height of the dialog never seems to change, any ideas on why?

Answer 1

Your code seems to be working as intended, the only problem I could see was your added classdialogClass : 'dialogRecurso'.

I tried to operate the other way around, and made a non-resizable dialog while keeping your code alive. I quickly found out that by adding this line in my CSS the window would stop resizing :

.dialogRecurso{max-width:300px; max-height:200px;}

Which makes me think it would be a CSS related issue and has nothing to do with your Javascript.