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

    TabPanel/MenuDropDown problema

    binhoscray

      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,

        • 1. Re: TabPanel/MenuDropDown problema
          binhoscray

          ????

          • 2. Re: TabPanel/MenuDropDown problema
            ilya_shaikovsky

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

            • 3. Re: TabPanel/MenuDropDown problema
              binhoscray

              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
                binhoscray

                I need some help!!!!!!

                • 5. Re: TabPanel/MenuDropDown problema
                  ilya_shaikovsky

                  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
                    thephil

                    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
                      thephil

                      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.