How to right align buttons on a HorizontalPanel (GWT)

Question

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

The point is to call setHorizontalAlignment before adding your buttons as shown below:

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 2

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.