My problem is that, i have a fixed navbar on the top of the page, which has 1030 z-index value. The growl component shows behind the fixed navbar. I tried to override the z-index value for the growl like this (from a custom css file):
.ui-growl {
z-index: 9999;
}
Note: My custom css file is the last one which is loaded:
...
<h:body>
<f:facet name="last">
<h:outputStylesheet library="css" name="custom.css"/>
</f:facet>
...
When i check the growl component in chrome it has an inline css style with a z-index value:
<div id="growl_container" class="ui-growl ui-widget" style="z-index: 1004;">...</div>
How should i solve this problem?
As .ui-growl has a inline style . So z-index:9999 will not override the css. So you have to use !important in this case.
So add !important to your css as below.
.ui-growl {
z-index: 9999 !important;
}
Note :Its not a good practice to use !important . I will suggest you to reduce the z-index of navbar ;)