Question

I have this code

HorizontalPanel hp = new HorizontalPanel();
hp.setWith("100%");
hp.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_LEFT);
hp.add(new Label("label 1"));
hp.add(new Anchor("anchor 1"));
hp.add(new Label("label 2"));
hp.add(new Anchor("Anchor 2"));
RootPanel.get().add(hp);

Actually it displays

label1…………………………………….anchor1………………………………..label2…………………………….anchor2

I actually wanted something like

label1 anchor1 label2 anchor2

Is there a layout for that or other solution ?
thx

Answer 1

You can keep your HorizontalPanel, but try this:

HorizontalPanel hp = new HorizontalPanel();
hp.setHorizontalAlignment(HasAlignment.ALIGN_LEFT);
hp.setSpacing(2); // 2 = number of pixels between each item
hp.add(new Label("label 1"));
hp.add(new Anchor("anchor 1"));
hp.add(new Label("label 2"));
hp.add(new Anchor("Anchor 2"));
RootPanel.get().add(hp);

All you really needed was a setSpacing property so they’re not literally attached to the next cell in your hp, and to remove the hp.setWidth("100%"). If you were doing this in UiBinder, you could keep the 100% width and set the width of each <g:cell> independently, allowing more flexibility.

Also, I suggest you use HasAlignment over HasHorizontalAlignment and/or HasVerticalAlignment, if for no other reason than HasAlignment is portable to all types of panels.