Home/ Questions/Q 8800373
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T00:34:19+00:00

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

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0