in 7.X, cannot specify font-size with em -- label disappears

Vaadin 6 / 7 / 8
1

After converting our Vaadin 6.X application to 7.X, a bunch of UI items disappeared. I’m finally getting back to this, and have found (but don’t understand) the reason. We have a label like this:

Label productLabel = new Label("some string", ContentMode.HTML); productLabel.addStyleName("productlabel"); In our styles.css – not scss – file we have:

[code]
@import “…/reindeer/legacy-styles.css”;

.productlabel {
font-size: 1.4em;
margin-bottom: 1em;
}
[/code]In v6 this was fine, but with 7.2.7 and 7.3.8 the label is not shown in the browser. If I change the font-size to use px instead of em, then it shows up again:

.productlabel { //font-size: 1.4em; font-size: 18px; margin-bottom: 1em; } When using em instead, the computed font-size becomes 0px according to the inspector in Chrome (and I see the same thing in FF and Safari). Can someone tell me what’s causing this, and what I can do to fix it? Besides converting everything to px I mean, since absolute sizes are, you know, evil.

Thanks,
Bobby

p.s. I’ve tried creating a sample app to show the issue, but somewhere since 7.0 it’s become so difficult to run a newly-generated project (using mvn) that I’m about to give up.

2

So many dependency version conflicts… Ok, am attaching a simple app that shows the behavior. Note that the em sizes work fine for margins, but fail with font-size.

To see the label disappear, uncomment the ‘em’ font-size and comment out the ‘px’ one:

.largertext {
    font-size: 18px;
    //font-size: 1.4em;
    margin-top: 2em;
    margin-bottom: 2em;
}

Cheers,
Bobby

17745.zip (75.4 KB)

3

That would be http://vaadin.com/download/release/7.3/7.3.8/release-notes.html#limitations

It is currently not possible to specify font-size as em or %, or layout component sizes with em (#10634).

This does not apply to Valo, but using em sizes to size layouts is discouraged, because it results in fractional component sizes in many cases, which might cause unwanted 1px gaps between components.