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

    Attribute styleClass ignored

    Massimo Romano Newbie

      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:




          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
          Jan Papousek Newbie

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

          • 2. Re: Attribute styleClass ignored
            Massimo Romano Newbie

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

            • 3. Re: Attribute styleClass ignored
              Jan Papousek Newbie

              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 class="rf-ddm-itm-lbl ">New</span>
                   <script type="text/javascript">....</script>


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

              • 4. Re: Attribute styleClass ignored
                iabughosh Master

                try include it using link instead of h:outputLink :


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



                • 5. Re: Attribute styleClass ignored
                  Massimo Romano Newbie

                  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>



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

                  Where is my error?

                  • 6. Re: Attribute styleClass ignored
                    ramkumarps Newbie

                    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"

                    <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" />
                      <!-- better not to include the CSS here if u like to override Richfaces -->
                    <div id="content">
                      <ui:insert name="body" />
                      <div id="footer" style="width: 100%; clear: both;">
                       <ui:insert name="footer" /> <!-- Footer If any -->
                       <ui:include src="globalFooter.xhtml" />
                    <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" />

                    thanks Ram:)