Question

我在我的一个主要界面中遇到了布局问题。我基本上有一个用DIV包装的表，下面的代码。最后一列应该包含我想要水平排列的按钮所以我把它们放在了一个panelGroup

中

<div style="overflow: auto; height: 300px;">
    <p:dataTable >
        <p:column headerText="Column 1">
        </p:column>
        .
        .
        <p:column headerText="Actions">
            <h:panelGroup layout="span">
                <p:commandButton value="Edit" icon="ui-icon-scissors" />
                <p:commandButton value="Delete" icon="ui-icon-trash" />
            </h:panelGroup>
        </p:column>
    </p:dataTable>
</div>

然而，当它们被渲染时，按钮是垂直排列的。查看HTML代码我注意到按钮都包含在div中这就是为什么他们之间有换行符。

如何解决这个问题？

由于

Answer 1

使用<h:panelGrid/>或<p:panelGroup/>包裹它们。这将在同一个表行中呈现table两个表格单元格（因此它们必须出现在同一行中）：

使用h:panelGrid：

<h:panelGrid columns="2">
    <p:commandButton value="Edit" icon="ui-icon-scissors" />
    <p:commandButton value="Delete" icon="ui-icon-trash" />
</h:panelGrid>

使用h:panelGroup：

如果您使用h:panelGroup没有样式，styleClass或id属性，则layout属性无效，并且不会在按钮周围呈现其他html。无论如何，添加样式：

<h:panelGroup style="white-space: nowrap">
    ....
</h:panelGrid>

使它们水平对齐，无论您使用的是哪个layout值。

如何在primefaces列中水平对齐按钮？

1 个答案: