如何设置 h:panelGrid 中一行的高度

Question

我想设置 h:panelGrid 中一行的高度。

我怎样才能实现这个目标？

这是我的CSS类：

.height8 {
    height: 8px;
}

.height0 tr td{
    height: 0%
}

页面代码：

<h:panelGrid columns="2" columnClasses="height8, height8" rowClasses="height8">
    <h:outputText value="This row"/>
    <h:outputText value=" is ok"/>

    <h:outputText value="This row"/>
    <h:outputText value=" is ok"/>

    <h:outputText value="This row" styleClass="height0"/>
    <h:outputText value=" height should be different" styleClass="height0"/>

    <h:outputText value="This row"/>
    <h:outputText value=" is ok"/>
</h:panelGrid>

样式类 height0 在这里似乎不起作用。如何设置 h:panelGrid 中特定行的高度？

Answer 1

我会使用 CSS 并在行单元格内容上使用一个类：

<h:panelGrid columns="2">
    <h:outputText value="This row"/>
    <h:outputText value=" is ok"/>

    <h:outputText value="This row" styleClass="alt-height"/>
    <h:outputText value=" height should be different"/>
</h:panelGrid>

您可以使用

:has()

伪选择器创建 CSS 规则来选择要更改高度的行：

tr:has(.alt-height) {
    height: ...
}

Answer 2

你有两种方法：

内联样式：

<h:panelGrid columns="2" columnClasses="height8, height8" rowClasses="height8">
    <h:outputText value="This row"/>
    <h:outputText value=" is ok"/>

    <h:outputText value="This row"/>
    <h:outputText value=" is ok"/>

    <h:outputText value="This row" style="height: 25px"/>
    <h:outputText value=" is ok" style="height: 25px"/>

    <h:outputText value="This row"/>
    <h:outputText value=" is ok"/>
</h:panelGrid>

CSS样式：

你的元素应该有一个 id:

<h:panelGrid columns="2" columnClasses="height8, height8" rowClasses="height8">
    <h:outputText value="This row"/>
    <h:outputText value=" is ok"/>

    <h:outputText value="This row"/>
    <h:outputText value=" is ok"/>

    <h:outputText value="This row" styleClass="customheight"/>
    <h:outputText value=" is ok" styleClass="customheight"/>

    <h:outputText value="This row"/>
    <h:outputText value=" is ok"/>
</h:panelGrid>

并将此样式添加到您的 CSS 文件中：

.customheight{
   height: 25px;
}

Answer 3

更改以下样式类应该可以工作

.height0 tr td{
    height: 0px; //or what ever height you want to set to this row.
}