How to set the style of specific cells of a PrimeFaces panelGrid with layout=tabular

Question

In GitHub issue PanelGrid: No way to manage style or identifiers of panelgrid cells except for tabular mode #5840, says it is possible to do it but doesn't say how.

I want to "hide" some cells. I have partially solved the problem using p:row and p:column; but those components don't work well inside a p:wizard. So I was wondering if there is another way to do it. Right now, I'm only hiding the cell content, but I'd also like to remove the padding and borders from the generated td.

I will really appreciate if someone can tell me how to set the style of specific cells without using p:row and p:column.

EDITED ON 11/15/22

Following the advice here is some code:

<p:panelGrid
    columns="2"
    columnClasses="xs-width-fit-content,xs-width-100"
    styleClass="xs-width-100">
    ...
    <h:panelGroup
        id="otraPaginaPanelDetalleWritingLabelGroup"
        style="#{usuario22.writingGridOtraPaginaVisible ? 'visibility: visible' : 'display: none'}">
        ...
    </h:panelGroup>
    <h:panelGroup
        id="otraPaginaPanelDetalleWritingFieldGroup"
        style="#{usuario22.writingGridOtraPaginaVisible ? 'visibility: visible' : 'display: none'}">
        ...
    </h:panelGroup>
    ...
</p:panelGrid>

The p:panelGrid has 2 columns, one for labels, etc, and other for input fields, etc. Each column contains a single h:panelGroup. Each pair of consecutive panelGroups would be a "row"; such "rows" are shown and hidden dynamically using AJAX. When the panelGroups of a "row" are hidden, I would like to change the style of their containing td, to set padding and borders to 0.

Answer 1

Your question comes down to styling empty cells. You can use the :empty CSS pseudo-class to do so. You want to override the theme rule for panel cells body .ui-panelgrid .ui-panelgrid-cell, so you want to use custom CSS like:

html body .ui-panelgrid .ui-panelgrid-cell:empty {
    // your properties
}

If you want to style certain cells containing certain content, you can use the :has CSS pseudo-class to select those cells. For example:

<p:panelGrid ...>
    <p:column>
        <div class="myClass">
            ...
        </div>
    </p:column>
</p:panelGrid>

html body .ui-panelgrid .ui-panelgrid-cell:has(.myClass) {
    // your properties
}

See also:

• How do I override default PrimeFaces CSS with custom styles?

Answer 2

Following Jasper's tip I could solve my problem using the :has() and :not() pseudo-classes.

First I changed the panel groups. Now they look like this:

<h:panelGroup
    id="otraPaginaPanelDetalleWritingLabelGroup"
    styleClass="xs-concealable-panel-group #{usuario22.writingGridOtraPaginaVisible ? 'xs-visible-panel-group' : 'xs-invisible-panel-group'}">
    ...
</h:panelGroup>
<h:panelGroup
    id="otraPaginaPanelDetalleWritingFieldGroup"
    styleClass="xs-concealable-panel-group #{usuario22.writingGridOtraPaginaVisible ? 'xs-visible-panel-group' : 'xs-invisible-panel-group'}">
    ...
</h:panelGroup>

I then added the following rules to the stylesheet:

.xs-visible-panel-group {
    visibility: visible;
}
.xs-invisible-panel-group {
    display: none;
}
html body .ui-panelgrid .ui-panelgrid-cell:has(.xs-concealable-panel-group):not(:has(.xs-visible-panel-group)) {
    border: 0;
    padding: 0;
}

The last rule applies to a cell (td) containing components with class xs-concealable-panel-group that do not contain components with class xs-visible-panel-group. This rule might seem more complicated than it needs to be but I am using a special code generator and using only :has(.xs-invisible-panel-group) was not enough.

I tested the solution with Chrome, Firefox, Edge and Opera. It doesn't work in Firefox 107.0. It works just fine with the others.