i have a issue with portlet z-index. My portlets was wrote using richfaces. The portal menu is rendered behind the portlet in internet explorer 7. In other browsers the menu is rendered in front of the portlet.
You can see this behavior in www.jboss.com.
Is there any jira for this?
how can i fix this?
i already open a jira for this
you can use a div and inside use the portlet and in that div you put an z-index to override the existing one, and use a overflow... something like this:
<div style="z-index:9999;overflow: visible !important;">
content
</div>
or in your image put a z-index to be lower/higher (depends on what you want to do, so your menu is on top...
I try your solution and it did not work. In fact my portlet uses a RichFaces Tabbed Panel. To solve the problem i have to change a CSS class in file:
skin\portal\webui\component\UINavigationPortlet\DefaultStylesheet.css located in web.war.
I change the class:
.UINavigationPortlet .UINavigationBar {
white-space: nowrap;
}
to
.UINavigationPortlet .UINavigationBar {
white-space: nowrap;
z-index:9999;
!position: relative;
}
well in fact it is not a richfaces bug or issue, its more about html, and how its going to display... if you have something behind and want to put in front of an object, you use the z-index to inform wich is going to show first...
the issue maybe in nested objects in html. but its solve with z-index
w3school:
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
| Default value: | auto |
|---|---|
| Inherited: | no |
| Version: | CSS2 |
| JavaScript syntax: | object.style.zIndex="1" |