CSS grid panels in datatable format
I need to put the background color on the panel bar inside the datatable when the hover event is handled. I wrote this code and this css but nothing happens. Any idea how to fix this problem?
<p:dataTable id="movementsTable" var="mov" value="#{movementsBacking.movements}" selectionMode="single" selection="#{movementsBacking.selectedMovement}" rowKey="#{mov.id}"
styleClass="nopadding " rowStyleClass="roteiroTable" style="margin: 0;" emptyMessage="#{text['list.empty']}" >
<p:ajax event="rowSelect" update=":#{cc.clientId}:movementPanel" oncomplete="PF('movementPanelVar').show()" listener="#{movementsBacking.onSelect}"/>
<p:column headerText="#{text['tasksbacking.tabRot']}" sortBy="#{mov.dataSent}">
<p:panelGrid id="panelGridSelect" rendered="#{mov.isTreated()}" styleClass="borderless">
<p:row>
<p:column>
<h:outputLabel value="#{text['tasksbacking.roteiro.num']}" style="margin-right:5px;"/>
<h:outputText id="num" value="#{mov.number}"/>
</p:column>
<p:column>
<h:outputLabel value="#{text['tasksbacking.roteiro.data']}" style="margin-right:5px;"/>
<h:outputText value="#{mov.dataSent}">
<f:convertDateTime pattern="dd-MM-yyyy"/>
</h:outputText>
</p:column>
</p:row>
<p:row>
<p:column>
<h:outputLabel value="#{text['tasksbacking.roteiro.de']}" style="margin-right:5px;"/>
<h:outputText value="#{mov.sender}" />
</p:column>
<p:column>
<h:outputLabel value="#{text['tasksbacking.roteiro.para']}" style="margin-right:5px;"/>
<h:outputText value=" #{mov.receiver}" />
</p:column>
</p:row>
<p:row>
<p:column colspan="2">
<!--<h:outputText value="#{text['tasksbacking.roteiro.resol']}"/>-->
<!--<h:outputText value="#{text['tasksbacking.true']}"/>-->
<h:outputLabel value="#{text['tasksbacking.roteiro.dataRes']}" style="margin-right:5px;"/>
<h:outputText value="#{mov.resolutionDate}">
<f:convertDateTime pattern="dd-MM-yyyy" />
</h:outputText>
</p:column>
</p:row>
<p:row>
<p:column colspan="2">
<h:outputLabel value="#{text['tasksbacking.registo.por']}" style="margin-right:5px;"/>
<h:outputText value="#{mov.resolutionUser.username}"/>
</p:column>
</p:row>
<p:row>
<p:column colspan="2">
<h:outputLabel value="#{text['tasksbacking.roteiro.resolution']}" style="margin-right:5px;"/>
<h:outputText value="#{of:abbreviate(mov.resolution.resolution, 80)}"/>
</p:column>
</p:row>
</p:panelGrid>
Css code:
.roteiroTable, .roteiroTable th, .roteiroTable td {
background-color: #F1F1F1 !important;
}
.nopadding, .nopadding th, .nopadding td {
padding: 0 !important;
}
.borderless, .borderless tr, .borderless td {
border: none !important;
}
+3
source to share
1 answer
You have to choose tr
. Below is a sample code.
<style>
.rowStyleX tr{
background-color: red !important;
}
</style>
<h:form>
<p:dataTable var="car"
value="#{dtBasicView.cars}"
rowStyleClass="rowStyleX">
<p:column headerText="Id">
<p:panelGrid>
<p:row>
<p:column>
<h:outputText value="car id: " />
</p:column>
<p:column>
<h:outputText value="#{car.id}" />
</p:column>
</p:row>
</p:panelGrid>
</p:column>
<p:column headerText="Year">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Brand">
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Color">
<h:outputText value="#{car.color}" />
</p:column>
</p:dataTable>
</h:form>
+1
source to share