3 Replies Latest reply on Sep 30, 2010 10:41 AM by Kriya Studio

    z-index

    Adriano Porto Newbie

      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

       

      https://jira.jboss.org/browse/GTNPORTAL-1472

        • 1. Re: z-index
          Kriya Studio Newbie

          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...

          • 2. Re: z-index
            Adriano Porto Newbie

            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;
            }

            • 3. Re: z-index
              Kriya Studio Newbie

              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:

              Definition and Usage

              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"