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:

 

.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
    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>
         <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'.

  • 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"/>

     

    regards.

  • 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>

    </div>

     

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