jQuery UI Dialog Content being shown in button section

Question

I have been working with jQuery dialog for a while, and the problem I am getting now is kind of strange.

jQuery version: 1.7.1 jQuery UI version: 1.8.18

<!-- Generic Dialog Box -->
<div id="dialog" style="display:none;position:absolute;"></div>

jQuery code:

$('.class_to_find').each(function(){
    //$('#dialog').append($(this).css({position:"absolute"}));
    $('#dialog').append("<p>Adding a line.</p>");
});
$('#dialog').dialog({
    //autoOpen: true,
    show: "explode",
    hide: "explode",
    modal: true,
    title: "Jobs",
    buttons: {
        Done: function() {
            $(this).dialog( "close" );
        }
    },
    close: function(){}
});
$('#dialog').dialog('open');

When the dialog opens, the content shows up underneath where the content usually shows up. it shows up in the button pane. This is a problem. I can't figure out why it is doing this. Does anyone know why?

Here is a JSFiddle which exposes the problem: http://jsfiddle.net/8Lj8m/1/

Thanks!

Answer 1

Remove dialog div style property position:absolute; and see if that is what you need.