How to align button horizontally in primefaces column?

java, jsf-2, primefaces

Solution

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

With `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`:

If you use `h:panelGroup` without style, styleClass or id attributes the `layout` attribute has no effect and no additional html will be rendered around your buttons. Anyway, adding the style:

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

makes them horizontally aligned, no matter which `layout` value you are using.

Problem

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 ``` <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. How to fix this problem? Thanks

Original source