View Full Version : BorderLayout : Z-index problem

15 Dec 2006, 11:50 PM
Hi! everybody,

I'm getting a funny problem with using Border Layout!

I have a location for Application menu bar in the North Region of My page layout .
I'm using YUI Menu(Application Menu bar example).

I'm getting the menu bar nicely in the desired location.

But the problem is When I focus on the menu bar Item , the drop down Menu that comes is going behind the Layout, as the div for Menu bar is only 30 px height .
It is going behind the centre region.
What should I do to make the menus and submenus come forward over the entire layout , rather than go behind the div.

Can you please throw some light on this!

Thanking you in advance,

16 Dec 2006, 10:01 AM
There are a few threads on this in Help and another example of fixing it in "Examples and Extras".

21 Dec 2006, 9:38 AM
Hi! Jack,

I have gone through the threads you suggested and tried the suggestion you gave to Wolfgang: I'm now getting the drop down menu over the main layout.
But I have a layout resembling Complex layout in examples. If I hide the West region (which is further split into two, horizontally, using inner layout), I'm getting the menu over the center region.
But when I expand the west region , the menu is lying behind west region , and over center region.

Can you suggest a way how to get the menu over the west region.

here is the code I used:

Here "menubar" is the div inside the north region


YAHOO.widget.Menu.prototype.show =
if(this.element.parentNode != document.body){

document.body.insertBefore(this.element, document.body.firstChild);

Note : alert("document.body.firstChild"); is returning : [object] Text

Thanking you in advance ,

21 Dec 2006, 1:19 PM
Hi! Jack,
I this is to provide you more information , so that you can quickly understand the problem.


initially gives undefined

the first time I click on a particular Menu , and switch to the next menu I'm getting the


as the previously selected menu , If I go deep into Submenus also, the same behaviour.... the document.body.firstchild.id is always pointing to the previously displayed menu or submenu.

But initially it is undefined.

Is it the desired behaviour?

If yes,
then why am I not getting the menu above the Complex layout.

Note: In my layout, the western region is Split into two halves using innerlayout. This is causing the problem. The menu is being displayed over first level of layout; but not over the inner layouts which have z-index much more than the primary layout.
Could you tell me how to get the dropdown menus in menu bar over the entire layout?

Thanking you in advance,

21 Dec 2006, 2:18 PM
You will still need to bump the z-index of the menu.

21 Dec 2006, 2:28 PM
Thank you Jack,
But I'm not knowing how to get menu on top of all the layout components .

document.body.insertBefore(this.element, document.body.firstChild);

is only bringing the drop down menu on top of main layout, but not over the inner layouts. And directly specifying Z-index for the menu div doesn't solve the problem.

what should I do to make the menus and submenus overlay over the innerlayouts?
waiting for your answer,
Thanking you in advance,

21 Dec 2006, 2:36 PM
That will put it over everything, but the menu element's z-index will need to be set when you create the menu. Or, you can hack it right on the menu show if you want:

document.body.insertBefore(this.element, document.body.firstChild);
YAHOO.util.Dom.setStyle(this.element, 'z-index', 20000);

I don't know how that will work with child menus though. The best way is in the menu's construction.

21 Dec 2006, 3:19 PM
Thank you Jack,
It worked magic.

You are genious!

Now I'm getting the YUI Menu over YUI-Ext Border layout (hwever complex the layout may be)!

And it became possible with your excellent support.

Thanks a lot, Jack.

And a small doubt too...

Yes, it did work for sub menus as well, but the sub menus , instead of lying at a higher z-index than their parent menu, the submenus are falling lower in the z-order to theier parent menu.
Is their any solution for this also?
I believe you can give solutions on the fly to many problems that may seem head aches to us mortals!

Side note:

I requested my boss to donate to your site, and got got his assent, but not immediately.
may be a couple of months later.
In the mean while , I'll help you by clicking on as many ads as I can while I'm browsing the net.
The effort you put deserves much more!

22 Dec 2006, 12:24 AM
I'm looking forward to a lightweight and flexible yui-ext menu system that will cover all these bases, be easier to use than the YUI menu, and be one eighth the code size!

10 Mar 2010, 8:34 AM
Yes, I'm resurrecting a really old thread, because ext-core has the same issue. I'm looking at the menu.js, and really have no idea where to make the menu render to document body.(as stated above)
it would be nice to have a config option to "allow content to flow outside this box", or clipping:true/false

you can see an example here: