CSS for <h:panelGrid

JSF / CSS / Trinidad

Note - these three are part of a delivery from IBM ILog and cannot be changed

JSF 1.2-1.2_07-b03-FCS

JSTL 1_1-mr2 (special build)

Trinidad 1.2.8

Java 1.6.0_22-b04

Eclipse 3.6.0 (Helios)

Tomcat 6.0.28 (needs to run also on Weblogic)

IE 7.0.5730.13

Firefox: 6.0

Modest experience in JSF, almost none in CSS.

JSP file: ...

    <tr:form>
        <h:panelGrid 
            columns="2" 
            border="2">

            <h:panelGrid 
                style="
                    background-color: Yellow; 
                    bottom: 0px; left: 0px; right: 0px; top: 0px; 
                    width: 150px">
            <tr:outputLabel 
                inlineStyle="font-size: 16px"
                value="#{msg.activityType}" 
                for="activityType"
                shortDesc="#{msg.titleFreqToolTipActivityType}"/>
            </h:panelGrid>
<!--... more panel grids-->         
        </h:panelGrid> 
    </tr:form>

The label shows a Yellow backgound

Change to this -

JSP file: ...

    <tr:form>
        <h:panelGrid 
            columns="2" 
            border="2">

            <h:panelGrid 
                styleClass="panelGridA">    
            <tr:outputLabel 
                inlineStyle="font-size: 16px"
                value="#{msg.activityType}" 
                for="activityType"
                shortDesc="#{msg.titleFreqToolTipActivityType}"/>
            </h:panelGrid>          
<!--... more panel grids-->
        </h:panelGrid> 
    </tr:form>

CSS file:

panelGrid.panelGridA {
    background-color: Yellow;
    bottom: 0px; left: 0px; right: 0px; t开发者_开发知识库op: 0px; 
    width: 150px;"
}

Result is not Yellow and the formatting ignored.

This type of code has worked with dataTable, so somewhat baffling.

Ideas?

Thanks, John

remove the panelGrid in the css selector or change to table.panelGridA, h:panelGrid gets rendered to a html table

also, add the !important tag to overide other built in css you might have)

.panelGridA {
    background-color: Yellow !important;
    bottom: 0px; left: 0px; right: 0px; top: 0px; 
    width: 150px;"
}