12 Replies Latest reply on Mar 23, 2011 6:46 PM by Nick Belaevski

    RF4 CR1 missing css for inner components?

    David Wagner Newbie

      My prototype app has a couple of different situations where rich components are missing css skin styles. The example shown here is a version of the skin selection form that contains an example accordion and tab panel. The skin style is clearly being applied to the parent rich:panel, but not to the accordion or tab panel. Once I click on a new skin selection, then the inner elemenst get styled.

      Am I missing something?

       

       

      Screen shot 2011-03-19 at 12.12.56 PM.png

      <ui:composition xmlns="http://www.w3.org/1999/xhtml"

          xmlns:ui="http://java.sun.com/jsf/facelets"

          xmlns:h="http://java.sun.com/jsf/html"

          xmlns:f="http://java.sun.com/jsf/core"

          xmlns:a4j="http://richfaces.org/a4j"

          xmlns:rich="http://richfaces.org/rich"

        template="/WEB-INF/includes/studio-layout.xhtml">

       

          <ui:define name="main">

              <h:form id="skinForm">

                  <rich:panel >

                      <f:facet name="header" position="center">

                          <h:outputText value="Presentation theme preferences" />

                      </f:facet>

                      <h:panelGrid border="0" columns="2">

       

                       <h:panelGroup>

       

                            <h:selectOneRadio value="#{skinBean.skin}"

                                border="0" layout="pageDirection" title="Changing skin" style="font-size: 8; font-family: comic"

                                onchange="submit()">

       

                                 <f:selectItems value="#{skinBean.skins}" />

       

                            </h:selectOneRadio>

                            <h:commandButton value="Apply" />

       

                       </h:panelGroup>

       

                       <h:panelGroup>

                           <rich:accordion height="100" width="200">

                                 <rich:accordionItem header="Item 1" style="font-family: monospace; font-size: 12;" >

                               Changing skin in runtime

                                 </rich:accordionItem>

       

                              <rich:accordionItem header="Item 2" style="font-family: monospace; font-size: 12;">

                               This is a result of the modification "blueSky" skin

                              </rich:accordionItem>

       

                        </rich:accordion>

                          <rich:tabPanel switchType="client">

                                  <rich:tab name="tab1" header="tab1" ></rich:tab>

                                  <rich:tab name="tab2" header="tab2" ></rich:tab>

                                  <rich:tab name="tab3" header="tab3" ></rich:tab>

                              </rich:tabPanel>

                       </h:panelGroup>

                   </h:panelGrid>

                  </rich:panel>

              </h:form>

          </ui:define>

      </ui:composition>