I am appending a footer to a dialog, how to fix the height?
===

I am appending a footer to the jquery ui dialog, and the footer style is just like the header i.e. it is fixed at the bottom, so if there is a scroll the content won't move the footer on the bottom.

The problem is, the height that the dialog automatically calculates is wrong because I am appending the footer html to the dialog, and I'm guessing this is AFTER it calculates the height, therefore the footer is in front of the text content.

So I am doing:

    var footer = "<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" ... ";
    
    $("#popup").dialog({
       modal: true,
       autoOpen: false,
       auto: true
    }).parent().append(footer);
    
    // if condition here
    $("#popup").dialog("open");

So I copied the style that the header has for my footer.

In chrome/firefox, I added this option to the dialog which adjusted the hieight by 20px which fixed my issue:

    $("#popup").dialog({
     modal: true,
     autoOpen: false,
     auto: true,
     open = function() {
       $("#popup").css('height', $("#popup").height() + 20);
      }
    
    });


Ideally I want to add the footer content to the dialog before it calculates the height, or somehow tell it to re-calculate the height.

The problem is, calling .dialog is what adds all the html/css/styling to the element #popup, and after the call (which calculates the height) I chain the append call but by that time it is too late.

Can I fix this somehow?  Again, **it has to work in IE**.