JSF面板网格顶部对齐方式

Question

我看到有一些关于这个问题的答案。用几种排列组合尝试了几乎所有的方法。但似乎什么都不起作用。

panelgris内部的组件总是居中对齐，而不是顶部对齐。

尝试了他们在下面的帖子中所说的一切。How to control alignment of DataTable inside of a PanelGrid?

如果有什么补救办法请告诉我。

Answer 1

<h:panelGrid>呈现一个HTML <table>元素。表格单元格<td>的垂直对齐默认为middle。你想让它变成top。使用CSS很容易做到这一点。

<h:panelGrid styleClass="foo">

使用

.foo td {
    vertical-align: top;
}

如果您在面板网格内有一个表格，您想要保留其默认表格单元格垂直对齐方式为居中，则需要按如下方式更改CSS：

.foo>tbody>tr>td {
    vertical-align: top;
}

因此，只有面板网格自己的表格单元格是顶部对齐的。

要了解所有关于CSS的信息，请查看http://www.csstutorial.net。

Answer 2

使用panelGrid的columnClasses属性标识包含vertical-align: top;样式的CSS类：

<h:panelGrid columns="2" columnClasses="topAligned">
...
</h:panelGrid>

和CSS文件：

.topAligned {
    vertical-align: top;
}

然后，panelGrid中第一列的内容将在其单元格内顶部对齐。

Answer 3

使用panelGrid的styleClass，如以下示例代码所示：

<h:panelGrid columns="2"  styleClass="top-aligned-columns" cellpadding="5" style="display:block" cellspacing="5"> 
    <p:outputLabel value="#{resources['IDNumber']}" />
    <p:inputText id="txtIDNumber" value="#{applicantBean.personal.idNumber}" />
</h:panelGrid>

然后在css中进行如下配置：

.top-aligned-columns td{
    vertical-align: top;
}

使用这种方法，您不仅可以对齐行，还可以将相同的styleClass应用于包含panelGrids的panelGrid中的其他panelGrid。

例如：

   <h:panelGrid columns="3" styleClass="top-aligned-columns" cellpadding="5" style="display:block" cellspacing="5">
        <p:panel id="pnlApplicant" header="#{resources['ApplicantHeader']}" styleClass="no-border">
            <h:panelGrid columns="2" cellpadding="5" style="display:block" cellspacing="5" styleClass="top-aligned-columns">
            <p:outputLabel value="#{resources['IDNumber']}" />
            <p:inputText id="txtIDNumber" value="#{applicantBean.personal.idNumber}"  >
                <p:ajax event="change" process="@this" update="tvQuickScore"/>
            </p:inputText>
            <p:outputLabel value="#{resources['Name']}" />
            <p:inputText id="txtFirstname" value="#{applicantBean.personal.firstName}" />
            <p:outputLabel value="#{resources['Surname']}" />
            <p:inputText id="txtSurname" value="#{applicantBean.personal.lastName}" />
        </h:panelGrid>
    </p:panel>  
</h:panelGrid>
</p:panel>