Why vertical layout with empty label in Valo has non zero height?

Vaadin 6 / 7 / 8
1

It seems that default font-size for .v-slot should be 0, but for nested non layout components it should be normal app font size.

Now vertical layout with empty label and undefined height occupying 24px.

2

The font-size: 0; was the solution for a very specific issue which affected Internet Explorer in Vaadin 7.0.0 (related to HTML5 doctype, inline-block rendering and unnecessary scrollbars).

In Valo, I used a new solution to this problem, which does not require setting the font size to zero in all component containers. This is better for theme developers since font size will cascade naturally through the hierarchy.

But because every widget in Vaadin is by default an inline-block, they will create a new line-box inside their parent container, which is as high as the highest inline element on that line. Which in this case is the font size * line height (16px * 1.55 ≈ 25px).

There are a few workaround which you can do, one being that you specify the empty label as a block element.

To make all labels blocks:

.v-label {
  display: block;
}

To make only empty labels blocks (doesn’t work in IE8):

.v-label:empty {
  display: block;
}

Another option is of course to remove the empty label from the component hierarchy completely on the server side.

3

One more problem with this solution - empty VerticalLayout inside VerticalLayout leads to 25px block. And this reproduced with any zero pixel height component inside container. So sad (

4

That is true, and the core reason is the same, that all Vaadin widgets are inline-blocks by default, creating a new
linebox
. Can’t really think of any great solutions right away, but I agree that it is annoying.