jQuery UI Dialog Titlebar Issue

I'm hoping that someone else has experienced this and can point me in the right direction as to the cause/fix.

The issue I am having is that I am using a jQuery UI-Dialog for some form input. When the dialog displays, it is devoid of the titlebar altogether. I cracked it open in firebug and noticed that there's a CSS item denoted as follows;

element.style {
  display:none;
}

The element.style, in Firefox appears to refer to /html/body/div[3]/div which is the div used for the titlebar itself. When I disable the display:none; the titlebar becomes visible. So, I know what is appearing to c开发者_开发知识库ause it, but it also appears that that css is the result of something happening possibly in jquery itself perhaps.

I originally thought that I might be having CSS conflicts due to my CSS files, so I commented them out and tried running the page with only the jquery libs and the custom css and images. Still get the same thing.

I have battling this for days now and could really use some advice.

Thanks

UPDATE:

$(document).ready(function() { 
    $("#dlgEditMlgData").dialog({ autoOpen: false, 
                                  modal: true, 
                                  show: 'blind', 
                                  hide: 'explode', 
                                  title: 'Mileage Entry Edit Utility'
    }); 
    $("#dlgEditMlgData").hide().siblings().hide();
});

---

You posted your code like this:

$(document).ready(function() { 
  $("#dlgEditMlgData").dialog({ 
    autoOpen: false,
    modal: true,
    show: 'blind',
    hide: 'explode',
    title: 'Mileage Entry Edit Utility'
  }); 
  $("#dlgEditMlgData").hide().siblings().hide(); 
});

When you call .dialog the element is moved to the end of the document and inserted into a wrapper(The frame of the dialog).

But after that you call hide on the element and also hide its' siblings which means that you hide the div itself but you also hide the titlebar which is a sibling to the div after it has been moved. If you need to hide the siblings of the element try doing so before creating the dialog.

---

Is there a reason that you're calling $("#dlgEditMlgData").hide().siblings().hide()? When you initialize a as a dialog with autoOpen set to false, the dialog is hidden to start. To show the dialog, you then call:

$('#dlgEditMlgData').dialog('open');

No need to explicitly call hide() on the dialog or its siblings.