css 如何使用layout=tabular设置PrimeFaces panelGrid的特定单元格的样式

enyaitl3 于 2022-11-19 发布在其他

关注(0)|答案(2)|浏览(113)

在GitHub问题PanelGrid: No way to manage style or identifiers of panelgrid cells except for tabular mode #5840中，说可以这样做，但没有说如何做。
我想“隐藏”一些单元格。我已经使用p:row和p:column部分地解决了这个问题;但是这些组件在p:wizard中不能很好地工作。所以我想知道是否有其他的方法可以做到这一点。现在，我只隐藏了单元格内容，但是我还想从生成的td中删除填充和边框。
如果有人能告诉我如何在不使用p:row和p:column的情况下设置特定单元格的样式，我将非常感激。

编辑日期：2012年11月15日

下面是一些代码：

<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>

p:panelGrid有2列，一列用于标签等，另一列用于输入字段等。每列包含一个h:panelGroup。每对连续的panelGroup将是一个“行”;这样的“行”是使用 AJAX 动态显示和隐藏的。当“行”的panelGroups隐藏时，我想更改其包含的td的样式，将填充和边框设置为0。

css

来源：https://stackoverflow.com/questions/74435276/how-to-set-the-style-of-specific-cells-of-a-primefaces-panelgrid-with-layout-tab

2条答案

按热度按时间

x7rlezfr1#

您的问题归结为对empty单元格进行样式化。您可以使用:empty CSS pseudo-class来完成此操作。您希望覆盖面板单元格body .ui-panelgrid .ui-panelgrid-cell的主题规则，因此您希望使用如下自定义CSS：

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

如果要为包含特定内容的特定单元格设置样式，可以使用:has CSS pseudo-class来选择这些单元格。例如：
第一次
另请参阅：

How do I override default PrimeFaces CSS with custom styles?

赞(0）回复(0）举报 2022-11-19

gab6jxml2#

按照碧玉的提示，我可以使用:has()和:not()伪类来解决我的问题。
首先，我更改了面板组。现在它们看起来如下所示：

<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>

然后，我将以下规则添加到样式表中：

.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;
}

最后一条规则适用于包含xs-concealable-panel-group类组件的单元格（td），该单元格不包含xs-visible-panel-group类组件。这条规则可能看起来比实际需要的更复杂，但我使用了一个特殊的代码生成器，仅使用:has(.xs-invisible-panel-group)是不够的。
我在Chrome、Firefox、Edge和Opera上测试了这个解决方案。它在Firefox107.0上不起作用。它在其他版本上工作得很好。

赞(0）回复(0）举报 2022-11-19

我来回答

css 如何使用layout=tabular设置PrimeFaces panelGrid的特定单元格的样式

2条答案

相关问题

热门标签

最新问答