PDA

View Full Version : BasicDialog z-order issues



brian.moeskau
21 Nov 2006, 9:19 PM
I am launching a BasicDialog from within a BorderLayout panel (based on the latest BasicDialog sample in the doc center). I have several issues, all seemingly related to z-order:

- If I set modal=true and shadow=true, the background modal shim covers everything including the dialog window

- If I set modal=false and shadow=true, then the dialog appears non-modally but is still covered by the shadow/background shim

- If I set both modal and shadow = false, then the dialog appears correctly, but then if I drag it, the dialog slides under the other layout regions

It seems like the z-order of the dialog is off somehow -- I'm using all of the html/css straight from the example. It happens consistently in both FF 1.5 and IE 6, so I'm obviously just missing something. Any ideas? (Unfortunately I don't have an easy way to post it to a public url at the moment)

Animal
22 Nov 2006, 12:15 AM
Jack was working on this feature last last night, so try getting the latest revision from the SVN repository. The code I've seen there separates the various Dialogs by 10 zindexes, and calculates the indices of the accompanying components based on the main element's index. It looks good.

jack.slocum
22 Nov 2006, 12:35 AM
Actually because you gave such a great description I am pretty sure the z-index code I checked in won't help.

What it sounds like the problem is, your dialog element is not rendered to the body.

Try executing something like this before the show call and see if it fixes it:

dialog.el.insertBefore(document.body.firstChild);

brian.moeskau
22 Nov 2006, 1:28 AM
Try executing something like this before the show call and see if it fixes it:

dialog.el.insertBefore(document.body.firstChild);
That worked like a champ. Any ideas why that would be required for me? I didn't see anything in the sample that showed manually inserting into the DOM, so I must have something different. Here's my code:

HTML page:

Dialog (#)
...
YAHOO.ext.EventManager.on('dialogLink', 'click', Template.showDialog, Template, true);
JS file:

Template = new function(){
this.showDialog = function() {
if (!this.dialog) {
this.dialog = new YAHOO.ext.BasicDialog("hello-dlg", {
modal:true,
autoTabs:true,
width:500,
height:300,
shadow:true,
minWidth:300,
minHeight:300
});
this.dialog.addKeyListener(27, this.dialog.hide, this.dialog);
this.dialog.addButton('Close', this.dialog.hide, this.dialog);
}
this.dialog.el.insertBefore(document.body.firstChild);
this.dialog.show(getEl('dialogLink').dom);
}
}();
The link is rendered in a content panel within a BorderLayout.

jack.slocum
22 Nov 2006, 2:53 AM
Where is the "hello-dlg" element? Is it in the root of the body?

brian.moeskau
22 Nov 2006, 3:10 AM
Ah, no. The reason being that my html is in a .NET user control that gets rendered into a master page, so I don't even have direct access to the body tag from the html design point of view. So in that case, I guess I do always have to manually reattach it as shown above. Thanks for the help!

jbowman
22 Nov 2006, 10:31 AM
yea I found in my development that the element that contains the dialog needs to be rendered to document.body... and not it's children. Otherwise you run into what's described.