How to right align buttons on a HorizontalPanel (GWT)

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 th开发者_高级运维e 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;
}

---

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

---

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.

---

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.

---

Here is an other example using UIBinder that should work:

<g:VerticalPanel>
 <g:HorizontalPanel width="100%">
  <g:cell horizontalAlignment="ALIGN_RIGHT" width="100%">
   <g:Button ui:field="cancelButton" text="Cancel"/>
  </g:cell>
  <g:cell horizontalAlignment="ALIGN_RIGHT">
   <g:Button ui:field="okButton" text="Ok"/>
  </g:cell>
 </g:HorizontalPanel>
</g:VerticalPanel>

---

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);

---

Best way to make the controls align to right or left is to write two lines of CSS as follows:

.buttonToRight {
    float: right;
    right: 100%;
}

and then assign them to the control as follows:

HorizontalPanel hpButtons = new HorizontalPanel();
hpButtons.addStyleName("buttonToRight");

---

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

---

Quite late to answer but just want to mention for record that setting width is important (as bikesandcode has already suggested above) otherwise it may not work.

Following worked for me,

<g:HorizontalPanel width="100%">
   <g:cell horizontalAlignment="ALIGN_RIGHT">
      <g:Button ui:field="buttonOK" text="OK"/>
   </g:cell>
</g:HorizontalPanel>

---

For UIBinder users, I want to extend @Peter Wagener's answer a little bit more.

As @Peter Wagener said, the following does not work.(I believe this is a bug.)

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

Here I provided an example to work around (multiple buttons).

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

NOTE:

1. The first cell should have large enough width.
2. Don't assign any width to the rest cells, so that there will be no gap between the first and second button.

---

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

Good luck!