Datatable rowStyleClass

[ClaudioC]

Dear friends I have a datatable with this rowstyleclass :

Code: Select all

rowStyleClass="#{item.statoIncarico eq 'in trattativa' ? 'trattativa' : null}">

I want to change row background color when row item has a particular state ( in my case if a item field == "in trattativa I want a red background ).

So in core-layout.css i've added this code :

Code: Select all

.trattativa{
    background-color: tomato;
    background-image: none;
}

But it doesn't work and row background color remain white . I've tested this rule in a project without a primefaces layout and it works.
Where is my fault ?

[mert.sincan]

Please try with;

Code: Select all

.trattativa{
    background-color: tomato !important;
    background-image: none;
}

OR

Code: Select all

.ui-datatable .trattativa{
    background-color: tomato;
    background-image: none;
}

[ClaudioC]

I've added both code suggested in my core-layout.css but it not works.
My datatable declaration is the follow :

Code: Select all

<p:dataTable id="datalist" value="#{incarichiController.items}" var="item" widgetVar="incarichi"
                                         selectionMode="single" selection="#{incarichiController.selected}"
                                         paginator="true"
                                         paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
                                         currentPageReportTemplate="(Incarichi: totale {totalRecords} elementi, Pagina: {currentPage}/{totalPages})"
                                         rowKey="#{item.idIncarichi}"
                                         rows="10"
                                         reflow="true"
                                         tableStyle="table-layout:auto"
                                         rowsPerPageTemplate="5,10,20,30,40,50"
                                         filteredValue="#{incarichiController.filteredIncarichi}"
                                         rowStyleClass="#{item.statoIncarico eq 'in trattativa' ? 'trattativa' : null}">
-------several columns ------- etc etc

[mert.sincan]

I couldn't replicate the issue. I tested with your sample code and my CSS code. Can you please attach a screenshot with DOM structure? I think "trattativa" class is not added into rows.
Also, can you try to add my css codes in your page.xhtml?

[ClaudioC]

If I added your code directly into XHTML page it works. Thanks. But the question now is : Why it not work if I added it into core-layout.css ?

[mert.sincan]

I added my css code into core-layout.css. it worked fine. Could you try to add theme.less instead of core-layout.css?