如何控制PanelGrid内部的数据对齐？

StackOverflow https://stackoverflow.com/questions/3547485

题

我已经有一个多列小组格式设置，其中每个列都有DataTables。每个数据表都有不同的长度。这导致小组格式伸展以适合最大的数据表（到目前为止，很好）。其余的数据列表是垂直居中的（这在屏幕上看起来不好，因为它在屏幕上看起来很可怕），而不是最合理的。

我如何告诉PanelGrid以最佳的内容化？或者，我的方法是完全错误的，我需要做一些不同的事情（如果是的话，欢迎建议）？

有帮助吗？

解决方案

JSF呈现为HTML，可以使用CSS进行样式。检查元素如下：

  1. 在浏览器中查看JSF页面。
  2. 右键单击页面。
  3. 选择 查看源.

这 <h:panelGrid> 渲染一个HTML <table> 元素;这 <h:dataTable> 作为HTML渲染 <table> 元素也是如此。数据元素嵌套在 <td> 元素，由 <h:panelGrid>. 。因此，设置 vertical-align 的 <td> 的 <h:panelGrid> 到 top.

假设 <h:panelGrid> 有一个 id 最终成为 <table id="panelGridId"> 在HTML中，使用以下CSS：

#panelGridId>tbody>tr>td { 
    vertical-align: top;
}

形式

如果网格是表单的一部分，则CSS需要包括表单的ID。例如：

<form id="amazingForm">
  <h:panelGrid id="amazingGrid">
    ...
  </h:panelGrid>
</form>

CSS将类似：

#amazingForm\:amazingGrid > tbody > tr > td {
  vertical-align: top;
}

例子

这是一个示例HTML文档，该文档显示在使用CSS配置的表中工作的垂直对齐：

<!-- language: html -->

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 3547485</title>
        <style>#myid>tbody>tr>td { vertical-align: top; }</style>
    </head>
    <body>
        <table id="myid">
            <tbody>
                <tr>
                    <td><table><tbody><tr><td>n1a</td></tr><tr><td>n1b</td></tr></tbody></table></td>
                    <td><table><tbody><tr><td>n2a</td></tr></tbody></table></td>
                    <td><table><tbody><tr><td>n3a</td></tr><tr><td>n3a</td></tr><tr><td>n3c</td></tr></tbody></table></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

所有人都与顶部保持一致。没有规则，所有人都被居中。很难说出您需要应用哪个规则，因为目前尚不清楚您生成的标记的外观。

教程

也可以看看：

其他提示

您可以使用CSS使PanelGrids排列最高。

.mystyle {
vertical-align: top;
horizontal-align: center;

}

在您的XHTML文件中包含。

<link href="#{resource['css:style.css']}" rel="stylesheet" type="text/css"/>

并将此代码添加到Parent PanelGrid中。

 <h:panelGrid columns="3" columnClasses="mystyle, mystyle, mystyle">

注意：对于3列，您可以包括3次

您可以避免将其应用于每个TD，仅在其内部的PanelGrid和DataTable内部应用。我遇到了同样的问题，以下对我有用：

.pgstyle td{ 
vertical-align: top;
}

在哪里 PGSTYLE 您给每个PanelGrid提供的Styleclass是否包含一个数据表，例如：

<h:panelGrid columns="1" styleClass="pgstyle">
<rich:dataTable ..>
 ....
</rich:dataTable>
</h:panelGrid>
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top