7 Replies Latest reply on Jul 13, 2007 4:57 AM by Philipp Straka

    TabPanel/MenuDropDown problema

    Fabio Cavalcanti Newbie

      Hi,

      I have created a page with a dropDownMenu and just below it a tabPanel.
      It works fine with Firefox, but when I try it with Internet Explorer 7 the menu does not appear; that is, the tabPanel appears above the menu. The tabs itself are below the
      menu, but the tabs contents get above it.
      I've saved the page as HTML and made some tests, and the problem is on the "style="position: relative;" that is placed on the TABLE and TD tags of the tabPanel.

      Has someone come across this? Is there something I can do on the CSS file?

      Thanks,

        • 2. Re: TabPanel/MenuDropDown problema
          Ilya Shaikovsky Master

          Seems you use old Rich Faces version. Please update to latest 3.0.2 snapshots.

          • 3. Re: TabPanel/MenuDropDown problema
            Fabio Cavalcanti Newbie

            I've already updated Rich Faces and Ajax4Jsf and I still get the same error on Internet Explorer, the tabPanel stays over the dropDownMenu. Is there any property related to that on the CSS? Any other suggestions? Thanks.

            • 4. Re: TabPanel/MenuDropDown problema
              Fabio Cavalcanti Newbie

              I need some help!!!!!!

              • 5. Re: TabPanel/MenuDropDown problema
                Ilya Shaikovsky Master

                ok my solution is:

                <rich:dropDownMenu value="menu">
                ...
                </rich:dropDownMenu>
                <rich:tabPanel>
                ...
                

                and css:
                .rich-ddmenu-label{
                 position:relative;
                 z-index:2000;
                }
                


                Works fine for me.

                • 6. Re: TabPanel/MenuDropDown problema
                  Philipp Straka Newbie

                  Hi!

                  I have quite exactly the same problem:

                  I have generated an application using seam-gen (seam 1.2.1 GA), and have exchanged the richfaces library, it now is version 3.0.1.

                  I use a rich:dropDownMenu inside a toolbar component. Below the toolbar, I use a rich:simpleTogglePanel.

                  > When I use the drop-down menu, it appears BEHIND the toggle panel. Here is my code:

                  <rich:toolBar>
                   <rich:toolBarGroup>
                   <h:outputText value="#{projectName}:"/>
                   <s:link view="/home.xhtml" value="Home"/>
                   <s:link view="/ParameterFinderList.xhtml" value="Search"/>
                   </rich:toolBarGroup>
                   <rich:dropDownMenu value="Generated">
                   <rich:menuItem submitMode="none">
                   <s:link view="/PuserList.xhtml"
                   value="Puser List"
                   propagation="none"/>
                  ........
                  </rich:toolBar>
                  <h:messages globalOnly="true" styleClass="message" id="globalMessages"/>
                  
                  <h:form id="parameterSearch" styleClass="edit">
                  
                  <rich:simpleTogglePanel label="Parameter search parameters" switchType="ajax">
                  
                   <s:decorate template="layout/display.xhtml">
                   <ui:define name="label">name</ui:define>
                   <h:inputText id="name" value="#{parameterFinder.example.name}"/>
                   </s:decorate>
                  .........
                  </rich:simpleTogglePanel >
                  


                  I have already tried to add
                  style="z-order:2000;"

                  to the dropdown menu only, to all sub-components additionally, to the tool bar itself and I also have tried to use your suggested solution above:

                  CSS:
                  
                  .rich-dropDownMenu {
                   position:relative;
                   z-index:2000;
                  }
                  


                  xhtml:
                  
                  <rich:dropDownMenu value="Generated" styleClass="rich-dropDownMenu">
                  


                  Can anybody please help me out?

                  • 7. Re: TabPanel/MenuDropDown problema
                    Philipp Straka Newbie

                    I have found a solution.

                    Working solution:

                    CSS:
                    .rich-ddmenu-label {
                     position:relative;
                     z-index:2000;
                    }
                    


                    The NAME of the CSS class is ESSENTIAL.
                    Richfaces seems to automatically assign CSS classes to components based on their name!


                    >> Is there a list of CSS classes that are automatically assigned? <<

                    <rich:dropDownMenu value="Generated">
                     <rich:menuItem submitMode="none">
                    ......
                    

                    No styleClass declaration necessary in the code.

                    Actually, "styleClass" declarations do not work at all! (You cannot assign a CSS class using that declaration - it has no influence)

                    Also, packing the same CSS declarations in a "style" declaration that are in the style class (see code above) has no influence.