4 Replies Latest reply on Sep 28, 2009 9:01 AM by gamba

    css with multiple portlets

    gamba Newbie

      Hi,

      I'm working with

      richfaces 3.3.1.GA
      portletbridge 1.0.0.CR1
      facelets 1.1.14
      jsf 1.2_13
      jboss 4.2.3.GA

      I have a problem using own css-statements and showing more than one portlet with a html-table-element on a portal-page.

      First portlet defines a series of *.xhtml-sites for a panel-bar subnavigation (with ui:include) and one of the included xhtml sites defines own css-elements, for a table-layout:

      <?xml version="1.0" encoding="utf-8"?>
      <ui:composition 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"
       xmlns:rich="http://richfaces.org/rich">
      
      <style type="text/css">
       .pisTableClass {
       width: 295px;
       border-top: 0px;
       border-left: 0px;
       border-bottom: 0px;
       border-right: 0px;
       margin: 0px 0px 0px 0px;
       padding: 0px 0px 0px 0px;
       empty-cells: hide;
       }
      
       .pisColumnClass {
       border-top: 0px;
       border-left: 0px;
       border-bottom: 0px;
       border-right: 0px;
       margin: 0px 0px 0px 0px;
       padding: 1px 1px 1px 1px;
       white-space: nowrap;
       empty-cells: hide;
       }
       ...
      </style>
      
      
      <h:form id="pisFormClassifyPanel">
       <a4j:outputPanel id="pisClassifyPanel" styleClass="pisTableClass">
      
       <rich:dataGrid value="#{classifyBean.klassenProperties}"
       var="props" id="pisClassifyTable" styleClass="pisTableClass"
       columnClasses="pisColumnClass" columns="1">
       ...
      </rich:dataGrid>
      </h:form>
      


      Above styles should hide the border of the table and this is what happens.
      But with a second portlet on the same portal-page and a second html-table-element ...
      <h:form>
       <rich:dataTable id="testTableForCSS">
       </rich:dataTable>
      </h:form>
      


      ... the border is available again. Without the second portlet on the page everything works as expected.

      Some not acceptable workaorund: With integrating the same CSS inside the *.xhtml of the second portlet the border disappears. It seems that the table-css is overwritten in the other portlet on the portal-page. No render option works me ...

      Here are the parts of my web.xml:

      <context-param>
       <param-name>org.richfaces.LoadStyleStrategy</param-name>
       <param-value>ALL</param-value>
      </context-param>
      
      <context-param>
       <param-name>org.richfaces.LoadScriptStrategy</param-name>
       <param-value>ALL</param-value>
      </context-param>
      
      <context-param>
       <param-name>javax.portlet.faces.renderPolicy</param-name>
       <param-value>DEFAULT</param-value>
      </context-param>
      
      <context-param>
       <param-name>org.ajax4jsf.RESOURCE_URI_PREFIX</param-name>
       <param-value>rfRes</param-value>
      </context-param>
      


      .. and the jboss-portlet.xml ...

      <portlet>
       <portlet-name>DPA...</portlet-name>
       <header-content>
       <script src="/faces/rfRes/org/ajax4jsf/framework.pack.js" type="text/javascript"></script>
       <script src="/faces/rfRes/org/richfaces/ui.pack.js" type="text/javascript"></script>
       <link rel="stylesheet" type="text/css" href="/faces/rfRes/org/richfaces/skin.xcss"/>
       </header-content>
      </portlet>
      


      Any hints?

      Thx,
      Gamba