JSF / CSS Attribute Selector

Question

I have a table with two columns. I would like to style the value of the second column differently using CSS when it contains a specific value.

Here's the view:

<h:dataTable id="tb_USER_DETAILS" border="1" var="userDtls"
    value="#{freqViewTable.freqDtlsTable}" columnClasses="keydata, occupieddata"
    style="width: 250px" styleClass="overalltable">
    <h:column id="frequency">
        <f:facet name="header">
            <h:outputText value="Frequency (Hz)" style="font-size:12pt" />
        </f:facet>
        <h:outputText value="#{userDtls.keyFrequency}" style="font-size: 12pt"/>
    </h:column>
    <h:column id="slot">
        <f:facet name="header">
            <h:outputText value="Slot" style="font-size:12pt" />
        </f:facet>
        <h:outputText id="slotdata" value="#{userDtls.occupiedFlag}" style="font-size: 12pt"/>
    </h:column>
</h:dataTable>

The css file is:

table {
   background : Blue ;
}

table.overalltable th {
    background : Yellow;
}

table.overalltable tr {
    background : White;
}

table.overalltable .keydata {
    background : Orange;
}

table.overalltable .occupieddata {
    background : YellowGreen;
}

Currently the .occupieddata is YellowGreen. I would like it to be Red when the value is "Occupied". Something like the following:

table.overalltable .occupieddata[occupiedFlag='Occupied'] {
    background : Red;
}

or like this:

table.overalltable .occupieddata[slotdata='Occupied'] {
    background : Red;
}

How could I achieve this? I am using the following technologies:

Java 1.6.0_22-b03
JSF 1.2
JSTL 1.2
Eclipse 3.6.0 (Helios)
Tomcat 6.0.28 (needs to run also on Weblogic)
IE 7.0.5730.13
Firefox: 3.6.12

BalusC · Accepted Answer · 2011-08-11 21:06:03Z

2

This isn't going to work. Your <h:outputText> renders a HTML <span> element because you specified the id and style attributes on it. If you checked the generated HTML code, it should look like this

<td class="occupieddata"><span id="slotdata" style="font-size: 12pt">Occupied</span></td>

Now, you could just add another style class to this as follows:

<h:outputText id="slotdata" value="#{userDtls.occupiedFlag}"
    style="font-size: 12pt" styleClass="#{userDtls.occupiedFlag}" />

so that it ends up like:

<td class="occupieddata"><span id="slotdata" style="font-size: 12pt" class="Occupied">Occupied</span></td>

You could then style it red as follows:

table.overalltable .occupieddata .Occupied {
    background : Red;
}

By the way, consider moving all that style="font-size:12pt out the markup into the stylesheet, there where it belongs.

answered Aug 11, 2011 at 21:06

BalusC

1.1m377 gold badges3.7k silver badges3.6k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

McDowell Over a year ago

There may be a bit of CSS hackery required to get the span to fill the cell (I'd try adding display: table to the span and setting padding: 0px; on the td elements.) That may not work on all browsers.

McDowell Over a year ago

I think you mean styleClass="#{userDtls.occupiedFlag ? 'Occupied' : ''}" on the outputText.

BalusC Over a year ago

@McDowell: regarding the padding, you're right. Just padding: 0 on td and display: block on the span should do it. As to the styleClass, no I think it doesn't return a boolean despite of having "Flag" in the property name. It's also been used as outputtext value.

Collectives™ on Stack Overflow

JSF / CSS Attribute Selector

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related