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

如果在panelgrid中有一个表，您希望将默认表格单元格保持为中间的垂直对齐，则需要按如下方式更改CSS：

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

这样只有panelgrid自己的表格单元格顶部对齐。

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

Answer 2

使用panelGrid的{{1}}属性来标识包含columnClasses样式的CSS类：

vertical-align: top;

和CSS文件：

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

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

Answer 3

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

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

JSF panelgrid对齐到顶部

3 个答案: