Add blank row on VerticalLayout

Vaadin 6 / 7 / 8 Framework UI
1

Hi all,

How to insert blank line on VerticalLayout ? (like
in HTML)
I was trying to use: addComponent(new Label(“”)), but It didn’t work…

Thanks in advance…

2

If you want to have some empty space in VerticalLayout, adding an invisible component, such as a Label, is one way. Notice that if the label text is empty, it will not take any space. If you give ordinary space as the label text, as with “[tt]
new Label(” “)
[/tt]”, it will also not be displayed. You need to give a non-breaking space character, such as [tt]
 
[/tt] or [tt]
 
[/tt].

layout.addComponent(new Label(" ", Label.CONTENT_XHTML));

However, you can use an empty label IF you provide a height for it:

Label emptyLabel2 = new Label("");
emptyLabel2.setHeight("1em");
layout.addComponent(emptyLabel2);

This allows adjusting the height of the gap, unlike the non-breaking space.

Alternatively, you could add some margin to the component above or below the space. Using a Label may be a bit easier though.

3

Thank you very much, sir… :slight_smile:

4

Yohan,

you can also check the
Toolkit Productivity Tools
 project , especially the TPTSizer component which was done exactly for this purpose - quickly creating the sizers. You can just use TPT or copy the TPTSizer code to your project. The all code is server-side only.

It is based on a Label (extends it) and allows to set the desired dimensions in the constructor, making possible to insert sizers and spacers in single line, for instance, the code snippets below doing the same job - inserting a 30 px tall spacer:

Using TPTSizer:

layout.addComponent ( new TPTSizer ( null, "30px" ) );

Using Label:

Label sz = new Label("");
sz.setWidth( null );
sz.setHeight ( "30px" );
layout.addComponent (sz);

Dmitri

5

The behavior of empty labels wasn’t mentioned in the book and this is a relevant use case, so I added it and some
examples
.

Please note also the use of Label as an expanding spacer.