Question

我正在尝试将styleClass应用于h:panelGrid而不将其应用于其子女：

<h:panelGrid id="mainPanelGrid" columns="2" width="100%" styleClass="topAligned" >
    <p:fieldset id="fs1" legend="fs1" style="width: max-content">  
        <h:panelGrid columns="3">
            <p:outputLabel for="id1" value="#{messages.label_application}" />
            <p:selectOneMenu id="id1" required="true" value="som">
                <f:selectItem itemLabel="#{messages.label_select}" noSelectionOption="true" />  
                <f:selectItems value="#{bean.availableItems}" />
            </p:selectOneMenu>
            <p:message for="id1" />
        </h:panelGrid>             
    </p:fieldset>  

     <p:fieldset id="fs2" legend="fs2" style="width: max-content">  
         <h:panelGrid columns="3">
             <!--more fields-->     
         </h:panelGrid>  
     </p:fieldset>
</h:panelGrid>

我的topAligned css：

.topAligned td{
    vertical-align: top !important;
}

问题在于我需要对两个字段集进行顶部对齐，这与我应用的styleClass一致，但它也会将此styleClass应用于所有子项。因此，两个字段集的所有字段（outputLabel，selectOneMenu等...）也会得到顶部对齐...

我尝试了从this question指定顶部对齐的所有不同方法，但没有成功......我也尝试查看html源代码，但它与所有jsf和primefaces东西有点混淆..

如果你知道一个可行的技巧......

Answer 1

使用

.topAligned td{
    vertical-align: top !important;
}

和JSF生成的HTML输出

<table class="topAligned">
    ...
</table>

你基本上是在 <td>的每个 <table>元素上应用该样式，也是嵌套<table>的元素。

如果您只想在父<td>的直接<table>元素上应用该样式，那么您应该使用columnClasses属性：

<h:panelGrid ... columnClasses="topAligned,topAligned">

与

.topAligned {
    vertical-align: top;
}

这将最终生成的HTML输出如下：

<table>
    <tbody>
        <tr>
            <td class="topAligned">...</td>
            <td class="topAligned">...</td>
        </tr>
    </tbody>
</table>

并且不会应用于嵌套<td>的{{1}}。

请注意，我还删除了无意义的<table>解决方法。它应该仅在您想要通过外部CSS样式覆盖硬编码!important时使用。

另请注意，此问题与JSF无关。 JSF在这个问题的上下文中只是一个HTML代码生成器。处理“普通香草”HTML / CSS时，你会遇到完全相同的问题。问题在于缺乏对基本HTML和CSS的熟悉。在http://htmldog.com，您可以找到不错的HTML / CSS教程。

将styleClass应用于父panelGrid元素，而不是子项

1 个答案: