PrimeFaces mega menu is hidden behind the centre contents, left & right side bars

I'm displaying a <p:megaMenu> on the header of template.

<p:layoutUnit id="topPanel" position="north" size="155" collapsed="false" resizable="false" closable="false" collapsible="false" gutter="6">

    <span style="position: absolute; top: 90px; width: 1360px; left: 0px; bottom: 0px; overflow-y: hidden;">

        <p:megaMenu>

        </p:megaMenu>

    </span>
</p:layoutUnit>

The <p:megaMenu> is the same as the one shown on the PrimeFaces showcase as indicated by the link shown (the default one).

It looks like the following.

When this menu is popup, it is hidden behind the content bar (<p:layoutUnit position="center"...> and the left side bar as can be seen in the snap shot).

I have tried with the following CSS class.

#topPanel {z-index:2 !important; }

but to no avail.

How to fix this? How to show <p:megaMenu> over the content bar and left & right side bars?

Answers


The following CSS classes need to be overridden.

.ui-layout-north {
    z-index: 20 !important;
    overflow: visible !important;
}

.ui-layout-unit-content {
    overflow:visible !important;
}

Also in this particular case, the style attribute of the <span> tag as shown in the question needs to be modified as follows.

<span style="position: absolute; top:90px; width:1360px; left:0px; bottom:0px;">

Removing the overflow-y: hidden; attribute (unnecessary) or it won't work even though the above CSS classes have been overridden.


Need Your Help

JQuery smooth scroll to positions inside DIV with overflow hidden

jquery css scroll

I have a div full of content (dates). At anyone time you can see 5 dates on screen. I want the arrow on the right of the div to scroll the div showing the next 5 until the end and visa versa the ar...

Does a thread-safe statsd client exist?

java multithreading thread-safety graphite statsd

I need to use a thread-safe statsd client in a web application to monitor user threads for the statistics. Please suggest a solution that is both thread safe and does not compromise performance.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.