19

我正在使用 Java EE 和 PrimeFaces。如何更改 PrimeFaces 中面板网格的列宽？有例子吗？

4

3 回答 3

32

您可以使用 columnClasses 限定 panelGrid 中的列。以下代码设置不同的宽度并将单元格内容与顶部对齐。

<h:panelGrid columns="2" style="width: 100%" columnClasses="forty-percent top-alignment, sixty-percent top-alignment">

.forty-percent {
     width: 40%;
}

.sixty-percent {
     width: 60%;
}

.top-alignment {
     vertical-align: top;
}
于 2014-04-02T14:24:37.110 回答
11

我有一个类似的问题，这是我的解决方案：

<p:panelGrid style="width:100%"> # notice that I do not define columns attribute in p:panelGrid!!
    <f:facet name="header"> # header
        <p:row> # p:row and p:column are obligatory to use since we do not define columns attribute!
            <p:column colspan="2"> # here I use colspan=2, coz I have 2 columns in the body
                Title
            </p:column>
        </p:row>
    </f:facet>

    <p:row>
        <p:column style="width:150px"> # define width of a column
            Column 1 content
        </p:column>
        <p:column> # column 2 will fill the rest of the space
            Column 2 content
        </p:column>
    </p:row>

    <f:facet name="footer"> # similar as header
        <p:row>
            <p:column colspan="2">
                Footer content
            </p:column>
        </p:row>
    </f:facet>
</p:panelGrid>

如您所见，主要区别在于您没有在p:panelGrid中定义columns属性。在页眉和页脚中，您必须使用p:row和p:column，在我的情况下，我还必须使用 colspan=2 因为在正文中我们有 2 列。

希望这可以帮助 ;）

于 2013-11-20T10:54:05.113 回答
7

您是否考虑过样式属性？例子 ：

<p:panelGrid columns="2" style="width: 50px">

否则，对于列：

<p:column style="width:50px">

请参阅此线程：如何在 <p:panelGrid> 中调整 <p:column> 的宽度？

于 2013-05-27T16:47:02.830 回答