CODEWITHSUNDEEP
jqueryhtmlcssjquery-uijquery-dialog
jeffery_the_wind
jeffery_the_wind

Reputation: 18198

jQuery UI Dialog Content being shown in button section

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');

enter image description here

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!

Upvotes: 0

Views: 285

Answers (1)

Deepak Biswal
Deepak Biswal

Reputation: 4320

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

Upvotes: 3

Related Questions