1 Reply Latest reply on Feb 8, 2012 8:18 AM by laurent thil

    rich:select incorrectly rendered inside a rich:collapsiblePanel under IE8

    laurent thil Newbie

      hello, I have a probleme with a rich:select nested inside a rich:collapsablePanel when the page is viewed in IE8. The xhtml is as follow:

       

      <h:panelGroup layout="block" styleClass="box" id="filterMenu">

                      <rich:collapsiblePanel header="Mes filtres" switchType="client"

                                             leftCollapsedIcon="none" leftExpandedIcon="none"

                                             rightCollapsedIcon="/resources/images/carre-sous-titre-plus.png"

                                             rightExpandedIcon="/resources/images/carre-sous-titre-moins.png"                                                  

                                             headerClass="titre degrade500" bodyClass="fondMenu" style="padding: 5px;">

                          <h:panelGroup layout="block" style="display:block;" id="filtre">

                              <h:panelGroup layout="block">

                                  <h:form id="filtreForm">

       

          

      <rich:collapsiblePanel header="Pays" switchType="client"

                                                             leftCollapsedIcon="none" leftExpandedIcon="none" expanded="false"

                                                             rightCollapsedIcon="/resources/images/btn-plus.png"

                                                             rightExpandedIcon="/resources/images/btn-moins.png"                                                  

                                                             headerClass="sous-titre-filtre" bodyClass="fondMenu">

       

                                          <rich:select itemClass="itemSelect" id="country"

                                                       value="#{monitoringCompaniesListResultBean.dataModel.filtres.paysFilter.itemFilterSaisie}"

                                                       enableManualInput="true" defaultLabel="#{searchBundle.companyPaysDefaultText}" 

                                                       styleClass="inplaceField">

       

                                              <f:selectItems value="#{monitoringCompaniesListResultBean.countries}"/>

       

                                              <f:ajax event="selectitem" listener="#{monitoringCompaniesListResultBean.dataModel.filtres.paysFilter.addItem}" render=":filterMenu"/>

                                          </rich:select>

                                      </rich:collapsiblePanel>

       

       

                                    </h:form>

                              </h:panelGroup>

                          </h:panelGroup>    

                      </rich:collapsiblePanel>

                  </h:panelGroup>

       

      When the popu menu of the rich:select (id=country) component is unrolled, the total list of the 250 item is shown, and they appears whithout the background color nor the border of the list. We can still see the element under them.

       

      After some investigation, I notice that the stylesheet 'select.ecss.jsf' is not loaded in IE8 in those circumstances. Does anyone experienced that ? If the rich:select is outside of the rich:collapsablePanel, it is displayed correctly.

        • 1. Re: rich:select incorrectly rendered inside a rich:collapsiblePanel under IE8
          laurent thil Newbie

          I've just found the root of the problem. IE ( IE8 included) does not manage more than 30 linked stylesheet files per web page. When included in the rich:collapsablePanel, the rich:select's style sheet is loaded as the 34th sheet (we have 24 styles sheets in the project) and so is not taken in account. If I move the rich:select outside of the rich:collapsablePanel, its style sheet is loaded in prder number 30 ans so the control appear ok.

           

          We're going to rationalise the number of style sheets in the project to get rid of the problem.