JSF panelgrid 对齐到顶部答案

【问题标题】：JSF panelgrid alignment to topJSF panelgrid 对齐到顶部
【发布时间】：2011-10-13 15:19:30
【问题描述】：

我看到有人为此发布了一些答案。几乎所有这些都尝试了几种排列组合..但似乎没有任何效果。

panelgris 中的组件始终居中对齐，而不是顶部。

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

如果有补救措施，请告诉我。

【问题讨论】：

你试过什么CSS？生成的标记是什么？你有SSCCE吗？

标签： css jsf primefaces

【解决方案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。

【讨论】：

您好，我添加了如下代码，尝试了您提到的两个选项，但仍然无法使其工作。错误是什么我在做什么？ panelgrid 中有 2 个 primefaces 面板，如下所示。
它们也不适合我。你有想过这个吗？

【解决方案2】：

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

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

和 CSS 文件：

.topAligned {
    vertical-align: top;
}

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

【讨论】：

【解决方案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>

【讨论】：

我尝试过使用 vertical-align: top 样式指令，即使我把它放在我正在使用的每个 h:panelGrid 中，它似乎也不起作用。 JSF2 或 CSS 中存在一些错误。