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

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

Label - Default size - Book of Vaadin

Tipsija Ducija
1 decade ago Aug 24, 2010 11:08pm
Matti Tahvonen
1 decade ago Aug 31, 2010 7:58am


Label is 100% width by default, because it is most commonly used in vertical layout and users most commonly want the text to wrap by the width of vertical layout. Also note that VerticalLayout is 100% width by default too. We have tried to set up a good defaults that works ok in most common situations, but this of course can make things bit weird for new developers who haven't discovered that different components have different default sizes. In your code Vaadin actually silently fallbacks the label component to be undefined width, otherwise you'd get a 0 pixel wide label. This might also cause more fuzziness, that is why the situation is reported in the "Analyze layouts" function.

I agree that the default sizes of the components are lousily emphasized in our documentation. I was recently giving some lessons about Vaadin development and noticed this same issue. A small table would be nice to have where the default sizes would be summarized. Also those components that will create scrollbars for overflown content should be listed.

Below some "facts" from compiled from my head (so the list most likely contain some mistakes).

100% width components:
- Label
- VerticalLayout
- Panel
- FormLayout
- Form
- CustomLayout
- CustomComponent
- TabSheet

100% * 100% components
- SplitPanel

Components that can have scrollable content:
- Panel (incl. Window)
- TabSheet
- SplitPanel
- CustomLayout (depending the template)
- Table

I hope this helps.


Tipsija Ducija
1 decade ago Aug 31, 2010 1:51pm

Thank you for the very nice answer (and for the table)!
I fully agree that the documentation should be updated, so it would be nice if someone (with greater knowledge than mine) would create the appropriate tickets in Trac. (I suppose Trac is the place where the requests must be posted. Isn't it?)

Just a couple of ideas about the documentation:
1) Each chapter, which is about a certain control should contain info about the default size. I suggest to put it in a visibly distinctive manner so that one can find it without reading the whole chapter.
2) The table of all controls and their default sizes is a super idea! Would be nice to see it in the book.
3) If mentioning a property of some object, then telling the default value would be appropriate. Would be nice to revise the whole book and tell the reader all the defaults. (Yeah I know, it is a big task, sorry for asking.)

Marko Grönroos
1 decade ago Sep 02, 2010 5:28pm
Marko Grönroos
1 decade ago Sep 10, 2010 10:21am

The Cheat Sheet now includes symbols that indicate the default sizes. I think it's more natural for this purpose than the Book. Anyhow, will add the information to the Book later.

Tipsija Ducija
1 decade ago Sep 10, 2010 1:58pm