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:)