Label disappears when giving a dynamic size in scss

Hello everybody,

while I was styling my application, I came up against the problem that my labels disappear when I
give them a dynamic size with “em” or “%” in my scss-file. If I give them an absolute size with “px”
it works.

I hope you can tell me what I’ve done wrong.

Thanks !

Here is my code of the scss-file:

@import “…/reindeer/reindeer.scss”;

@mixin mytheme {

@include reindeer;

.main{

padding-top: 2%;
padding-left: 5%;
padding-right: 5%;
padding-bottom: 2%;

background-color: white;

}

.header{
font-size: 1.2em;
margin-right: 5px;
margin-top: 2px;
font-weight: bold;

}

.info{

margin-top:2px;
margin-right: 15px;
font-style: italic;

}

.version{

font-size: 1.2em;
line-height: normal;
font-weight: bold;
text-align: center;

}

}

It’s difficult to discern what’s going on in the stylesheet above. Could you provide an example (Java code) where this problem occurs?

Sure, this is the part of the code where the header and the info tag are used:

   final HorizontalLayout infoHolder = new HorizontalLayout();

    final Label user = new Label();
    user.setValue("Benutzer: ");
    user.addStyleName("header");

    final Label actUser = new Label();
    actUser.setValue(iamBenutzer.getVorname() + " " + iamBenutzer.getNachname());
    actUser.addStyleName("info");

    final Label login = new Label();
    login.setValue("Login: ");
    login.addStyleName("header");

    final Label actLogin = new Label();
    actLogin.setValue(iamBenutzer.getLogin());
    actLogin.addStyleName("info");

    final Label lang = new Label();
    lang.setValue("Sprache: ");
    lang.addStyleName("header");

    final ComboBox langChooser = new ComboBox();

    infoHolder.addComponent(user);
    infoHolder.addComponent(actUser);
    infoHolder.addComponent(login);
    infoHolder.addComponent(actLogin);
    infoHolder.addComponent(lang);
    infoHolder.addComponent(langChooser);

    addComponent(img,0,0);
    addComponent(infoHolder,1,0);

    setComponentAlignment(infoHolder, Alignment.TOP_RIGHT);

I can confirm this behaviour with the Vaadin version used in the sampler. Try updating your Vaadin version because it seems like this problem seem to be solved in Vaadin 7.3.0beta1…at least in the online demo (sry i don’t have a proper IDE running right now). I’m guessing that it is hopefully solved in some Vaadin 7.2.X version.

Hey Tobias,

I’m sorry I could not reproduce this problem. Tried in 7.1.13. Both “em” and “%” work as expected in my testing project.