JSF面板网格对顶对齐

Question

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

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

尝试了他们在下面的帖子中所说的一切。如何控制数据表在PanelGrid中的对齐?

请告诉我是否有补救办法

Answer 1

<h:panelGrid>呈现HTML <table>元素。表单元格<td>的垂直对齐默认为middle。你想把它改成top。这在CSS中很容易。

<h:panelGrid styleClass="foo">

.foo td {
    vertical-align: top;
}

如果你在panelgrid中有一个表格，你想保持默认的表格单元格垂直对齐为中间，那么你需要改变CSS如下:

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

使得只有panelgrid自己的表格单元格是顶部对齐的。

要了解有关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应用于包含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>