Label - Default size - Book of Vaadin

Hello!

As I am playing with Vaadin and learning it - I have found an interesting thing that I would like to share with you.

Here is a simple piece of code:

HorizontalLayout root = new HorizontalLayout();
getMainWindow().setContent(root);
Label the_label = new Label("Some label");
root.addComponent(the_label);

I run the application with the
?debug
parameter, in the debug window I click the analyze layouts button and it says:

Alright - I see that the Label has the default width set in percentage, but isn’t it strange that the default behaviour produces such a warning/error? I suppose that everything should work with DEFAULT settings without errors, or at least there should be some note in the manual about the special case. I have read the section “5.4. Label” in the Book of Vaadin, but didn’t find any information about the default width of Label and actually I don’t understand


WHY is it set in percentage by default?

Hi,

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.

cheers,
matti

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.)

Added a ticket (
#5518
) about this.

The text in the description of each component should probably be a separate paragraph; the graphical design of the book is rather conservative and there are not many graphical attention elements currently, so a very distinctive notation for the default sizes would stand out too much.

A table is possible, but it should be rather compact.

Perhaps the Cheat Sheet could have some symbol attached to each component box that tells the default size in each direction.

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.

Thanks! This is very nice! It could probably be difficult to find for those who are looking for this info. I opened the cheat sheet for the first time and it took quite much time for me to find where is this info. Anyway - thanks! Great job!