What am I missing with layouts? (N00b Al3rt)

Vaadin 6 / 7 / 8 Framework UI
1

Hi everyone,

I a new to Vaadin and the first showstopper for me is simple and sad : I copy-pasted the example from
paragraph 6.4.1
 of the Vaadin book into a webapp and I really don’t obtain what figure 6.4 shows…
Please find attached a screenshot of the result I get.

Am I missing the obvious thing?
Thanks.
Cyril
11129.png

2

Hi there.

This seems to be a little outdated example, as there has been a change to the Label that is not reflected here. Earlier the Label had an undefined width, which means that it will grow depending on how long the String you give it is. Nowadays, the Labels width is 100%, which means that it will not grow when it hits it’s limit in width, it will word wrap. In other words, you get multiple rows. This is a more suitable case more often than the old behaviour.

To update the example I changed this code:

grid.addComponent(new Label("Shrinking column<br/>Shrinking row", Label.CONTENT_XHTML));
grid.addComponent(new Label("Expanding column (1: )<br/>Shrinking row", Label.CONTENT_XHTML));
grid.addComponent(new Label("Expanding column (5: )<br/>Shrinking row", Label.CONTENT_XHTML));
grid.addComponent(new Label("Shrinking column<br/>Expanding row", Label.CONTENT_XHTML));
grid.addComponent(new Label("Expanding column (1: )<br/>Expanding row", Label.CONTENT_XHTML));
grid.addComponent(new Label("Expanding column (5: )<br/>Expanding row", Label.CONTENT_XHTML));

into this

Label label = new Label("Shrinking column<br/>Shrinking row",
        Label.CONTENT_XHTML);
Label label2 = new Label("Expanding column (1: )<br/>Shrinking row",
        Label.CONTENT_XHTML);
Label label3 = new Label("Expanding column (5: )<br/>Shrinking row",
        Label.CONTENT_XHTML);
Label label4 = new Label("Shrinking column<br/>Expanding row",
        Label.CONTENT_XHTML);
Label label5 = new Label("Expanding column (1: )<br/>Expanding row",
        Label.CONTENT_XHTML);
Label label6 = new Label("Expanding column (1: )<br/>Expanding row",
        Label.CONTENT_XHTML);
label.setWidth(null);
label2.setWidth(null);
label3.setWidth(null);
label4.setWidth(null);
label5.setWidth(null);
label6.setWidth(null);
grid.addComponent(label);
grid.addComponent(label2);
grid.addComponent(label3);
grid.addComponent(label4);
grid.addComponent(label5);
grid.addComponent(label6);

The only difference above is that I’ve specified width=null for the labels, which means “undefined”.

The result was this:

And after copy pasting the css code from the bottom of that page to my application it looked like this:

I’m gonna make a ticket about fixing this example. Thanks for the tip, and helping us making the documentation better!

3

Here’s the
ticket
. Thanks again!

4

Thank you!
Indeed, having the vaadin book clean and up-to-date seems pivotal to me, otherwise you might just lose potential adopters.