6 Replies Latest reply on Jul 12, 2012 11:51 PM by ramkumarps

    Attribute styleClass ignored

    gotamo
    gotamo Jul 6, 2012 10:43 AM

      Hi to all.

      I'm using RichFaces 4 in Seam 3 but I'm experiencing some problems in overriding the style of an element "rich:menuItem".

       

      Basically the stile of the application is skinned (wine) so the style class "rf-ddm-itm-lbl" is used for the elemnent "rich:menuItem".

       

      Aniway I have to override the style just for one specific item so I tried defining a style class in a css file included using:

       

      <h:outputStylesheet library="css" name="default.css" />

       

      The style class is very simple:

       

      .menuItem1L

      {

          color: white; !important

      }

       

      Then I used the attribute styleClass in this way:

       

      <rich:menuItem label="Logout" styleClass="menuItem1L">

       

      But the styleClass attribute is completelly ignored, infact in the generated code I found:

       

      </span><span class="rf-ddm-itm-lbl ">Logout</span>

       

      What I'm doing wrong???

       


        • 1. Re: Attribute styleClass ignored
          jpapouse
          jpapouse Jul 10, 2012 7:36 AM (in response to gotamo)

          Hi, try to look at div element with "rf-ddm-itm" class. The @styleClass value is appended here.

            • Actions
          • 2. Re: Attribute styleClass ignored
            gotamo
            gotamo Jul 10, 2012 8:02 AM (in response to jpapouse)

            The span tag is generated by the rich:menuItem richfaces tag, I do not have any controll to the div element.

              • Actions
            • 3. Re: Attribute styleClass ignored
              jpapouse
              jpapouse Jul 10, 2012 8:12 AM (in response to gotamo)

              When I look at the generated code I see something like this:

               

              <div id="form:menuItem1" class="rf-ddm-itm rf-ddm-itm-unsel">
    <span class="rf-ddm-itm-ic ">
          <img ...>
     </span>
     <span class="rf-ddm-itm-lbl ">New</span>
     <script type="text/javascript">....</script>
</div>

               

              The @styleClass is used in the top-level element with class 'rf-ddm-itm'.

                • Actions
              • 4. Re: Attribute styleClass ignored
                iabughosh
                iabughosh Jul 10, 2012 9:07 AM (in response to gotamo)

                try include it using link instead of h:outputLink :

                 

                <link type="text/css" rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/resources/css/default.css"/>

                 

                regards.

                  • Actions
                • 5. Re: Attribute styleClass ignored
                  gotamo
                  gotamo Jul 12, 2012 12:54 PM (in response to jpapouse)

                  Actually the generated code is ...

                   

                  <div class="rf-ddm-itm rf-ddm-itm-unsel menuItem1L" id="j_idt14:j_idt26">

                      <span class="rf-ddm-itm-ic "><img alt="" height="16"

                          src="/sibc/resources/img/menu/logout_1liv.png" width="16" /></span><span

                          class="rf-ddm-itm-lbl ">Logout</span>

                      <script type="text/javascript">new RichFaces.ui.MenuItem("j_idt14:j_idt26",{"onClickHandler":function(event){RichFaces.submitForm(event.form, event.itemId);return false;}} );</script>

                  </div>

                   

                  So the styleclass is realy mentioned ... but the color dosn't change.

                  Where is my error?

                    • Actions
                  • 6. Re: Attribute styleClass ignored
                    ramkumarps
                    ramkumarps Jul 12, 2012 11:51 PM (in response to gotamo)

                    hi Romano,

                     

                    Follow the below PAge for sure your CSS will work Perfect.

                     

                    this is my template file

                     

                    <!DOCTYPE html>
                    <html xmlns="http://www.w3.org/1999/xhtml"
                    xmlns:h="http://java.sun.com/jsf/html"
                    xmlns:f="http://java.sun.com/jsf/core"
                    xmlns:ui="http://java.sun.com/jsf/facelets"
                    xmlns:a4j="http://richfaces.org/a4j">

                    <h:head>
                    <title><ui:insert name="pageTitle"/></title>
                    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
                    <h:outputStylesheet>
                      <!-- better not to include the CSS here if u like to override Richfaces -->
                    </h:outputStylesheet>
                    </h:head>
                    <h:body>
                    <div id="content">
                      <ui:insert name="body" />
                    </div>
                      <div id="footer" style="width: 100%; clear: both;">
                       <ui:insert name="footer" /> <!-- Footer If any -->
                       <ui:include src="globalFooter.xhtml" />
                      </div>
                    </div>
                    <ui:insert name="ovrCSS" /> <!-- Adding all the style sheets here; inorder to get the expected style to be applied -->
                    <h:outputStylesheet name="accordion.css" library="css" />
                    <h:outputStylesheet name="formelement.css" library="css" />
                    <h:outputStylesheet name="default.css" library="css" />
                    <h:outputStylesheet name="custom.css" library="css" />
                    <h:outputStylesheet name="button.css" library="css" />
                    </h:body>
                    </html>

                    thanks Ram:)

                      • Actions