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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/13132999/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-31 11:36:59  来源:igfitidea点击:

How to align button horizontally in primefaces column?

javajsf-2primefaces

提问by Mark Estrada

I am having a layout problem in one of my primefaces UI. I basically have a table wrapped in a DIV with the code below. The last column should contain buttons that I wanted to arrange horizontally so I enclosed them in a panelGroup

我的其中一个 Primefaces UI 出现布局问题。我基本上有一个用下面的代码包裹在 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>

However, when they are rendered the buttons are arrange vertically. Viewing the HTML code I notice that the buttons are both wrapped in a div so thats why there is a newline between them.

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

How to fix this problem?

如何解决这个问题?

Thanks

谢谢

回答by Akos K

Wrap them with a <h:panelGrid/>or a <p:panelGroup/>. This will render a tablewith two table cells in the same table row (so they must be appear in the same row):

用 a<h:panelGrid/>或 a包裹它们<p:panelGroup/>。这将table在同一表格行中呈现具有两个表格单元格的a (因此它们必须出现在同一行中):

With h:panelGrid:

h:panelGrid

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

With h:panelGroup:

h:panelGroup

If you use h:panelGroupwithout style, styleClass or id attributes the layoutattribute has no effect and no additional html will be rendered around your buttons. Anyway, adding the style:

如果您h:panelGroup不使用style、styleClass 或 id 属性,则该layout属性无效,并且不会在您的按钮周围呈现额外的 html。无论如何,添加样式:

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

makes them horizontally aligned, no matter which layoutvalue you are using.

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