Question

I have wide bar-shaped DIV in my HTML and want to put 2 groups of widgets on the opposite sides of it (left and right). I was thinking DockPanel will help me, but it doesn’t.

The following code places both image and button at the left side of a bar, despite the fact I set opposite directions for them. What is the reason of this?

@Override
public void onModuleLoad() {

    Image logo = new Image("images/online.png");

    HorizontalPanel leftPanel = new HorizontalPanel();
    leftPanel.add(logo);

    PushButton userListButton = new PushButton(new Image("images/Bullet-Arrow-Up-32.png"));

    HorizontalPanel rightPanel = new HorizontalPanel();
    rightPanel.add(userListButton);

    DockPanel mainPanel = new DockPanel();
    mainPanel.add(leftPanel, DockPanel.WEST);
    mainPanel.add(rightPanel, DockPanel.EAST);

    RootPanel.get("manubar").add(mainPanel);

}

Thanks!

Answer 1

You need to specify the size of mainPanel, otherwise it’s just as big as it’s content.
Try:

mainPanel.setSize("100%");

Also this example might help.

http://examples.roughian.com/index.htm#Panels~DockPanel