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;"
}