CODEWITHSUNDEEP
cssjsfprimefaces
zobbo
zobbo

Reputation: 127

Setting specificity of CSS for Primefaces using dynamic StyleClass

I have the following PrimeFaces datagrid:

<h:outputStylesheet name="/css/stocksStyle.css" />

    <h:form id="mainForm">
        <p:dataGrid id="prices" var="orderBooks" value="#{stocksView.latestPricesResults}" columns="3" rows="12">
                <f:facet name="header">
                    WST 100
                </f:facet>
                <p:column>
                    <p:panel header="#{orderBooks.bidOrderId.member.memberId}" styleClass="#{stocksView.priceChange == 1 and stocksView.priceChangeMember == orderBooks.bidOrderId.member.memberId ? 'stockPriceHigher' : (stocksView.priceChange == -1 and stocksView.priceChangeMember == orderBooks.bidOrderId.member.memberId ? 'stockPriceLower' : 'black')}">
            <h:panelGrid columns="1">
            <h:outputText value="#{orderBooks.price}" >
                <f:convertNumber type="currency" />
                </h:outputText>
            <h:outputText value="#{orderBooks.bidOrderId.member.party}" />
            <h:outputText value="#{orderBooks.lastUpdate}" />
            <h:panelGrid columns="2">
                <p:commandLink update="buyDetail" oncomplete="PF('buyDialog').show()" title="Buy Detail">
                    <h:outputText value="Buy"/>
                    <f:setPropertyActionListener value="#{orderBooks}" target="#{stocksView.selectedStock}" />
                </p:commandLink>
                <p:commandLink update="sellDetail" oncomplete="PF('sellDialog').show()" title="Sell Detail" rendered="#{stocksView.hasPortfolios[orderBooks.bidOrderId.member.memberId].booleanValue()}">
                    <h:outputText value="Sell"/>
                    <f:setPropertyActionListener value="#{orderBooks}" target="#{stocksView.selectedStock}" />
                    </p:commandLink>
                </h:panelGrid>
            </h:panelGrid>
            </p:panel>
            </p:column>
            </p:dataGrid>

I'm setting the background colour depending on whether or not the price has gone up or down:

<p:panel header="#{orderBooks.bidOrderId.member.memberId}" styleClass="#{stocksView.priceChange == 1 and stocksView.priceChangeMember == orderBooks.bidOrderId.member.memberId ? 'stockPriceHigher' : (stocksView.priceChange == -1 and stocksView.priceChangeMember == orderBooks.bidOrderId.member.memberId ? 'stockPriceLower' : 'black')}">

However I have more specific CSS for the panel which means the background of the component isn't changed correctly, I can only see it in the outline of the component. Here is my CSS:

.ui-panel.ui-widget.ui-widget-content.ui-corner-all {
border-radius: 0;
}

.ui-panel-titlebar.ui-widget-header.ui-helper-clearfix.ui-corner-all{
background: #666666;
border-radius: 0;
}

.ui-panel-content.ui-widget-content{
background: #000000
}

.ui-datagrid-header.ui-widget-header.ui-corner-top{
background: #666666;
border-radius: 0;
}

body .stockPriceLower{
background: red;
}

body .stockPriceHigher{
background: green;
}

So somehow I need stockPriceHigher to override .ui-panel-titlebar.ui-widget-header.ui-helper-clearfix.ui-corner-all but I'm not sure how to get that to work.

Upvotes: 0

Views: 170

Answers (1)

Apostolos
Apostolos

Reputation: 10463

If I understood correctly, you need to override the background of the panel header. Since you define a custom class at p:panel tag, this will be appplied to parent component. What you can define in your css is the following:

.stockPriceHigher .ui-panel-titlebar.ui-widget-header.ui-helper-clearfix.ui-corner-all {
  background: green;
}

This will override the previous selector

.ui-panel-titlebar.ui-widget-header.ui-helper-clearfix.ui-corner-all{
  background: #666666;
  border-radius: 0;
}

Upvotes: 2

Related Questions