0 Replies Latest reply on Mar 5, 2008 6:03 PM by Mouleeswaran Subramanian

    CSS styles not applied for RichFaces tags

    Mouleeswaran Subramanian Newbie

      Hi,

      Please help in the below issue..

      In my applicaiton i am having a home page which contains Rich menu tags and below i have <a4j:include> tag which will load the pages based on the menu option selected.

      <link rel="stylesheet" type="text/css" href="styles/common.css" />
      <div class="menucontainer">
      <rich:toolBar width="99%">
       <rich:dropDownMenu value="Home">
       </rich:dropDownMenu>
       <rich:dropDownMenu value="Employee">
       <rich:menuItem submitMode="ajax" value="Search" actionListener="#{dynamicIncludeBean.openEMPSearch}" reRender="includedView">
       </rich:menuItem>
       </rich:dropDownMenu>
      </rich:toolBar>
      </div>
      <div class="contentcontainer">
       <a4j:include id="includedView" viewId="#{dynamicIncludeBean.page}" rendered="true" ajaxRendered="true"></a4j:include>
      </div>
      


      The CSS styles have been imported using tags. So when the user selects the menuitem "Search" i am loading "empsearch.jsp" page in the include part using the backing bean...
      The code for empsearch.jsp is as follows....

      <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
      <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
      <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
      <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
      <rich:panel styleClass ="headerClass">
      
       <div>
       <p style="float:left;color: #00008B; text-decoration: none;font-family: Arial, Helvetica, sans-serif;font-size: 8pt;">Employee>>Search</p>
       <p align="right" style="float: right;padding:0 10px 0 0;">
       <a4j:commandButton value=" Save " onmouseover="this.style.color='#d30100'" onmouseout="this.style.color='#ffffff'"
      style="background:url(images/toolbar-Menu-Back.gif) repeat-x;border:1px solid #5f8cc3;color:#ffffff;cursor:pointer;font-size:8pt;" />
      </p>
       </div>
      <rich:panel>
      


      The common.css contains a style as follows
      .headerClass{
      width:990px;
      border:0px;
      padding:0px;
      background:transparent;
      }

      The problem is when user clicks search menu option the empsearch.jsp is getting loaded but the sytle what i have mentioned for the <rich:panel> tag in css style class "headerClass" is not loaded.
      But once after loading the page, if i refresh the browser window the styles are getting applied.
      i have tried to load the styles using <a4j:loadStyle> tags but still it's not applied.

      But if we mention the styles as inline i.e in the <rich:panel> tag itself ...then it is applied correctly....
      <rich:panel style="width:990px;border:0px;padding:0px;background:transparent;">

      please any one give me the correct solution. I am posting the same issue second time...
      Please let me know if anyone need more information on this....
      I am stuck with this for past two weeks.

      Thanks & Regards,
      Mouli