CODEWITHSUNDEEP
javacssjsf-2primefaces
Adriano Castro
Adriano Castro

Reputation: 1471

PrimeFaces menu with layer issues

I have a <p:menubar> in a xhtml template. The div that surrounds it has these CSS properties:

position: fixed;
top: 44px;
width: 100%;

So I can fix the menu header while user scrolls down the page.

The problem now is that some Prime Faces component have icons and headers overflowing the menu.

printscreen

I tried to work with z-index but no success. I imagine that there is another solution in PrimeFaces instead of z-index.

Thanks a lot.

Upvotes: 0

Views: 1582

Answers (2)

BalusC
BalusC

Reputation: 1108632

According to the PrimeFaces default style sheet primefaces.css, the <p:message(s)> icon is relatively positioned. 

.ui-messages-info-icon, .ui-messages-warn-icon, .ui-messages-error-icon, .ui-messages-fatal-icon, .ui-message-info-icon, .ui-message-warn-icon, .ui-message-error-icon, .ui-message-fatal-icon {
    background: url("/omnifaces/javax.faces.resource/messages/messages.png.xhtml?ln=primefaces") no-repeat;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
}

I'm in first place not sure why it's relatively positioned as it doesn't seem to need to be offsetted nor have any absolutely positioned children. Perhaps it's been used as some (most likely IE-specific) workaround/hack for something else (if this was "has layout" related, the developer would better have used overflow: hidden instead for this). So just making it the default position: static should fix it.

Add the following to your override stylesheet to achieve this:

.ui-messages-info-icon, .ui-messages-warn-icon, .ui-messages-error-icon, .ui-messages-fatal-icon, .ui-message-info-icon, .ui-message-warn-icon, .ui-message-error-icon, .ui-message-fatal-icon {
    position: static;
}

Alternatively, you could of course also set z-index of the menu with an insane high value, as you figured out yourself. I wouldn't consider this a reliable solution though, this is too much a workaround/hack.

Upvotes: 1

Adriano Castro
Adriano Castro

Reputation: 1471

Resolved it by setting the z-index: 9999999 to the <p:outputPanel> sorrounding the menu instead of setting the style property in the menu.

Upvotes: 0

Related Questions