Get started
Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Where to include a web components css file when integrating a third party w by Martin Vyšný, 1 week ago
Recent Posts
Vaadin Forum3. Vaadin 6, 7, 8Framework UI

Add blank row on VerticalLayout

Yohan Yudanara
1 decade ago Apr 26, 2010 8:25am

Hi all,

How to insert blank line on VerticalLayout ? (like <br/> in HTML)
I was trying to use: addComponent(new Label("")), but It didn't work..

Thanks in advance...

Marko Grönroos
1 decade ago Apr 26, 2010 9:44am

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]&#160;[/tt] or [tt]&nbsp;[/tt].

layout.addComponent(new Label("&nbsp;", 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.

Last updated on Apr, 26th 2010
+1
Yohan Yudanara
1 decade ago Apr 26, 2010 10:09am

Thank you very much, sir... :)

Dmitri Livotov
1 decade ago Apr 26, 2010 11:17am

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

Last updated on Apr, 26th 2010
Marko Grönroos
1 decade ago Apr 26, 2010 11:28am

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.