gwt panel horizontal alignment not working

Question

I have a GWT dialog box that looks like the following:

public class FooDialog extends DialogBox {

public FooDialog() {
     setText("Foo Dialog");
     VerticalPanel outer = new VerticalPanel();
     outer.setBorderWidth(3);
     outer.setSize("400px", "200px");
     outer.setHorizontalAlignment(HasAlignment.ALIGN_CENTER);
     outer.setVerticalAlignment(HasAlignment.ALIGN_MIDDLE);

     Button cancelButton = new Button("Cancel", new ClickHandler() {
      public void onClick(ClickEvent event) {
        hide();
      }
    });

     HorizontalPanel buttons = new HorizontalPanel();
     buttons.setBorderWidth(3);
     buttons.add(cancelButton);

     outer.add(buttons);

     setWidget(outer);
    }
}

For some reason the 'buttons' panel does not obey the horizontalAlignment setting; it sticks to the left side of the outer panel. It does, however, obey the vertialAlignment setting. Any ideas? Thanks!

Answer 1

Tables don't respect the parent's horizontal alignment property. Instead, set the left & right margins of the child table to "auto".

buttons.getElement().getStyle().setProperty("marginLeft", "auto"); buttons.getElement().getStyle().setProperty("marginRight", "auto");

More Info: Center a table with CSS