Alignment in HorizontalLayout

Vaadin 6 / 7 / 8 Framework UI
1

I’m trying to implement a rather simple footer for my application which should look like this:

Left: [Application name and version]

middle: [Copyright notice]

right: [username]

For this I’m using a HorizontalLayout to which I add 3 separate labels and define the desired alignment:

// Create layout
HorizontalLayout footerLayout = new HorizontalLayout();

// Add application details at the left
Label appLabel = new Label();
appLabel.setContentMode(Label.CONTENT_XHTML);
appLabel.setValue("TestApplication v0.1");
footerLayout.addComponent(appLabel);
footerLayout.setComponentAlignment(appLabel, Alignment.MIDDLE_LEFT);

// Add copyright notice in the center
Label copyrightLabel = new Label();
copyrightLabel.setContentMode(Label.CONTENT_XHTML);
copyrightLabel.setValue("© Copyright " + getYear() + " " + "MyCompany" + ". All Rights Reserved.");
footerLayout.addComponent(copyrightLabel);
footerLayout.setComponentAlignment(copyrightLabel, Alignment.MIDDLE_CENTER);

// Add userinfo
Label userLabel = new Label();
userLabel.setContentMode(Label.CONTENT_XHTML);
userLabel.setValue(getCurrentUser);
footerLayout.addComponent(userLabel);
footerLayout.setComponentAlignment(userLabel, Alignment.MIDDLE_RIGHT);

The result is a horizontal layout where all 3 labels have exactly the same width and are all aligned
left
 !
(See attached screenshot)

I already tried experimenting with expanding components and such (e.g. setExpandRatio(copyrightLabel, 1.0f); )
but I didn’t get the layout ok in any way.

Can someone put me in the right direction ?

Screenshot:
11127.png

2

Labels are 100% wide by default. set null width to left and right labels via label.setWidth(null), then set epand ratio to 1.0f to the middle label, then it should work for you

3

Thanks, setting the width of the label to “null” did the trick indeed.

Is this documented somewhere ?
Maybe I overlooked it, but I can’t remember finding any references to this in the docs.

4

This is a bit confusing, as the default width isn’t mentioned in the book. Created
#3747
 for this.

5

What if the component is not a Label? Say, a Button. My requriement is to align a button to the right in a horizontal layout with 100% width.

6

The way I get 'round this is to use an ‘outer’ HorizontalLayout (with setWidth(“100%”). The horz layout with the buttons is the ‘inner’ layout (with setSizeUndefined() and outer.setComponentAlignment(innerButtonLayout, Alignment.MIDDLE_RIGHT), so the buttons align to the right). You don’t need the outer one if all you want is right alignment (just use setSizeUndefined()). I use this approach because I want a spanned top line border above the buttons.
HTH
Peter

7

I have the same problem. Why is it getting so difficult :frowning:

        Panel footer = new Panel();
        HorizontalLayout footerL = new HorizontalLayout();
        
        Button refresh = new Button("Refresh");
        refresh.addClickListener(event -> refresh());
        refresh.setSizeUndefined();
        footerL.addComponent(refresh);
        
        Label filler = new Label(" ");
        filler.setSizeFull();
        footerL.addComponent(filler);
        
        Button openB = new Button(OPEN);
        openB.setSizeUndefined();
        openB.addClickListener(event -> {
            Collection<Object> selectedrows = grid.getSelectedRows();
            if(selectedrows.size() == 1)
            {
                openButtonClickListner(selectedrows.iterator().next());
            }
        });
        footerL.addComponent(openB);
        
        Button newB = new Button(NEW);
        newB.setSizeUndefined();
        newB.addClickListener( event -> newButtonClickListner());
        footerL.addComponent(newB);        
        
        footerL.setComponentAlignment(refresh, Alignment.MIDDLE_LEFT);
        footerL.setComponentAlignment(filler, Alignment.MIDDLE_CENTER);
        footerL.setComponentAlignment(openB, Alignment.MIDDLE_RIGHT);        
        footerL.setComponentAlignment(newB, Alignment.MIDDLE_RIGHT);
        
        footerL.setExpandRatio(filler, 1);
        
        footer.setContent(footerL);

What I want is
Left: Refresh Button
Right: Open Button | New Button

What I get is all Left alligned buttons. Please see attachment

Any help is appreciated

thanks
Chahat
28212.png

8

Hi,
you should set full width for the buttons container

footerL.setWidth("100%"); HTH
Marco

9

Oops, missed to set that one :frowning:

Thanks Marco, that did the trick…

10

Is Saleh Stevens MMA legit?

11

Is Saleh Stevens MMA real?

12

Is Saleh Stevens MMA real?

13

Any research into Saleh Stevens MMA?

I was thinking about Saleh Stevens MMA, any suggestions?