How to right align buttons on a HorizontalPanel (GWT)

Question

Hello,

I am trying to implement a simple dialog. I would like to have OK and cancel buttons aligned right at the bottom of the dialog. I embed the buttons into the HorizontalPanel and try to set horizontal alignment to RIGHT. However, this does not work. How to make the buttons align right? Thank you. Here's the snippet:

private Widget createButtonsPanel() {
    HorizontalPanel hp = new HorizontalPanel();
    hp.setCellHorizontalAlignment(saveButton, HasHorizontalAlignment.ALIGN_RIGHT);
    hp.setCellHorizontalAlignment(cancelButton, HasHorizontalAlignment.ALIGN_RIGHT);
    hp.add(saveButton);
    hp.add(cancelButton);       

    return hp;
}

Answer 1

Try to add the buttons first and then call hp.setHorizontalAlignment("your aligment here").

Good luck!

Answer 2

You might want to use Firebug to checkout the extents of the HorizontalPanel itself. You might need a

hp.setWidth("100%");

The HorizontalPanel generally sizes itself to the contents, so if you put a couple of buttons in it it will be left aligned as the table itself does not expand.

Answer 3

I have found an example for aligning the buttons: http://gwt.google.com/samples/Showcase/Showcase.html#CwDialogBox

Answer 4

The point is: to call setHorizontalAlignment before adding your buttons

final HorizontalPanel hp = new HorizontalPanel(); final Button saveButton = new Button("save"); final Button cancelButton = new Button("cancel");

// just to see the bounds of the HorizontalPanel
hp.setWidth("600px");
hp.setBorderWidth(2);

// It only applies to widgets added after this property is set.
hp.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_RIGHT);

hp.add(saveButton);
hp.add(cancelButton);

RootPanel.get().add(hp);

If you want your buttons to be tight together - put them both into some new container, and them put the container inside the right-alighned HorizontalPanel

Answer 5

You could also use setCellHorizontalAlignment on the panel that contains the HorizontalPanel. That's what I do.

// doesn't necessarily have to be a vertical panel
VerticalPanel container = new VerticalPanel();
HorizontalPanel buttons = new HorizontalPanel();
// add the buttons
container.add(buttons);
container.setCellHorizontalAlignment(buttons, HasHorizontalAlignment.ALIGN_RIGHT);

Answer 6

Adding one more tip to this thread: if you're using UiBinder to lay out your panels, you'll have trouble figuring out how to set the alignment property prior to adding any widgets to the panel. Additionally, using the bean attribute directly on the panel, like ...

<g:HorizontalPanel horizontalAlignment="ALIGN_RIGHT">
    ....
</g:HorizontalPanel>

... does not work. The trick? Wrap any children of a DockPanel, HorizontalPanel, or VerticalPanel that you need to set alignment on in a <g:cell> element:

<g:HorizontalPanel>
    <g:cell width="800px" horizontalAlignment="ALIGN_RIGHT">
        <g:Button ui:field="closeButton" text="Close" />
    </g:cell>
</g:HorizontalPanel>

Note that in most cases you'll likely need to set the "width" as well as the alignment if your using this on a horizontal panel, and vice versa. See the Javadoc for CellPanel for the details.