CODEWITHSUNDEEP
cssprimefacesjsf-2.2
krilas
krilas

Reputation: 47

How can I change style of p:panelGrid for odd columns?

I work with jsf 2.2 and primefaces, I have realise many layers (xhtml files).

From my p:datalist, when I select one row, I display : Edit, Creat or View Dialog, from this code (List.xhtml) :

<ui:composition template="/templateUser.xhtml">
<ui:define name="body">
    <h:form id="RefTableListForm">
        <p:panel header="#{bundle.Title}">
            <p:dataTable id="datalist" value="#{beanController.items}" var="item" ... >
                <p:ajax event="rowSelect"   update="createButton viewButton editButton "/>
                <p:ajax event="rowUnselect" update="createButton viewButton editButton "/>

                <p:column>
                    <f:facet name="header"><h:outputText value="#{bundle.Title_idAvis}"/></f:facet><h:outputText value="#{item.idAvis}"/>
                </p:column>
                <p:column>
                    <f:facet name="header"><h:outputText value="#{bundle.Title_libAvis}"/></f:facet><h:outputText value="#{item.libAvis}"/>
                </p:column>
                
                <f:facet name="footer">
                    <p:commandButton id="createButton" icon="ui-icon-plus"   value="#{bundle.Create}" actionListener="#{beanController.prepareCreate}" update=":RefTableCreateForm" oncomplete="PF('RefTableCreateDialog').show()"/>
                    <p:commandButton id="viewButton"   icon="ui-icon-search" value="#{bundle.View}" update=":RefTableViewForm" oncomplete="PF('RefTableViewDialog').show()" disabled="#{empty beanController.selected}"/>
                    <p:commandButton id="editButton"   icon="ui-icon-pencil" value="#{bundle.Edit}" update=":RefTableEditForm" oncomplete="PF('RefTableEditDialog').show()" disabled="#{empty beanController.selected}"/>
                    <ui:remove>
                    <p:commandButton id="deleteButton" icon="ui-icon-trash"  value="#{bundle.Delete}" actionListener="#{beanController.destroy}" update=":growl,datalist" disabled="#{empty beanController.selected}"/>
                    </ui:remove>
                </f:facet>
            </p:dataTable>
        </p:panel>
    </h:form>
    <ui:include src="Create.xhtml"/>
    <ui:include src="Edit.xhtml"/>
    <ui:include src="View.xhtml"/>
</ui:define></ui:composition>

But now, I would change all my ODD columns of my all p:panelGrid with bold font, if is it possible ?

In my css file, I try this code to put all my odd columns in bold font :

.ui-panelgrid tr  {
    font-weight: bold !important;
}

But don't work for View Dialog all his columns are bold, with this code (View.xhtml) :

<ui:composition>
<p:dialog id="RefTableViewDlg" widgetVar="RefTableViewDialog" modal="true" resizable="false" appendTo="@(body)" header="#{bundle.Title}">
    <h:form id="RefTableViewForm">
        <h:panelGroup id="display">
            <p:panelGrid columns="2" rendered="#{beanController.selected != null}">
                <h:outputText value="#{bundle.Label_idAvis}"/>
                <h:outputText value="#{beanController.selected.idAvis}" title="#{bundle.Title_idAvis}"/>
                <h:outputText value="#{bundle.Label_libAvis}"/>
                <h:outputText value="#{beanController.selected.libAvis}" title="#{bundle.Title_libAvis}"/>
            </p:panelGrid>
            <p:commandButton value="#{bundle.Close}" onclick="RefTableViewDialog.hide()"/>
        </h:panelGroup>
    </h:form>
</p:dialog></ui:composition>

And my genereted html for View Dialog is:

   <html>
<form id="RefTableViewForm" name="RefTableViewForm" method="post"  >
<input type="hidden" name="RefTableViewForm" value="RefTableViewForm" />
<span id="RefTableViewForm:display">
<table id="RefTableViewForm:j_idt56" class="ui-panelgrid ui-widget" role="grid">
    <tbody>
        <tr class="ui-widget-content" role="row">
            <td role="gridcell" class="ui-panelgrid-cell">IdAvis:</td>
            <td role="gridcell" class="ui-panelgrid-cell"><span title="IdAvis">08</span></td>
        </tr>
        <tr class="ui-widget-content" role="row">
            <td role="gridcell" class="ui-panelgrid-cell">LibAvis:</td>
            <td role="gridcell" class="ui-panelgrid-cell"><span title="LibAvis">REGLEMENT PAR COMPTE DEVISES</span></td>
            </tr>

    </tbody>
</table>
<button id="RefTableViewForm:j_idt63"  />
</form>
</html>

But from Edit or Create Dialog, i get this generated html :

<tr class="ui-widget-content" role="row">
        <td role="gridcell" class="ui-panelgrid-cell"><label id="j_idt51" class="ui-outputlabel ui-widget" for="idAvis">IdAvis:</label></td>
        <td role="gridcell" class="ui-panelgrid-cell"><input id="idAvis" name="idAvis" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all ui-state-disabled" title="IdAvis" /></td>
</tr>

Thank you for your help and advice !

Upvotes: 1

Views: 805

Answers (1)

Henning Od&#233;n
Henning Od&#233;n

Reputation: 130

Your CSS sets the font weight to bold on every table row contained in an element with the class ui-panelgrid. This might be good in some cases, though in order to have every odd row styled like you want, there is a pseudo class inside of CSS that can help: nth-child(). You can pass a number, even, odd or a function of the form An+B to this, and it will select rows accordingly. The functional argument selects every A child starting at an offset of B from 0.

In order to get every odd table row in bold, you can use this:

.ui-panelgrid tr:nth-child(odd) {
    font-weight: bold !important;
}

or, optionally using the function, this:

.ui-panelgrid tr:nth-child(2n+1) {
    font-weight: bold !important;
}

This selects every odd tr residing inside of elements with the class ui-panelgrid and should change the rows of your table the way you had planned. Please note, though, that not all browsers may support this, depending on how old the version they are running is. Refer to the guide also linked above for more information on that.

Upvotes: 1

Related Questions