Can change color but not size if Label

I created a Label and set a Style:

Label l = new Label(“Adios”);
l.addStyleName(“miestilo”);
l.setStyleName(“miestilo”);

In mytheme.scss

.miestilo{
font-size:45px;
color: red;
}

The color worked but the size not. What I doing wrong?! Thanks in advance!

P.D. I m using vaadin 7 and I create a new theme

Hi,

First of all, you don’t need to both use setStyleName and addStyleName, but that should not matter why you cannot see the font size change. Depending on how you are adding your label, you should probably also change the line-height. In what way didn’t the font size change? Sure you cleared the cache from the browser and so on?

Check with FireBug, Chrome inspector or some other similar tool which CSS rule in the theme is overriding your font size setting and make your rule more specific.

Yes, of course, first check if something is overriding your font size. I just made the assumption that the provided code was a minimal example. However, on a clean Vaadin 7 project, I don’t see that there should be a problem with overriding, but correct me if I’m wrong :slight_smile:

I checked in Chrome Inspector, “.miestilo” appear in the rules correctly, but the rule that is applied is this the below (ej1theme is the name of the Theme)

.ej1theme .v-widget {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: left;
display: inline-block;
white-space: normal;
vertical-align: bottom;
font-size: 12px; <--------This is been aplied
line-height: normal;
}

.miestilo{
font-size:45px; <-------- This is not been applied
color: red;
}

Why this is happening?

My mistake! I find the problem I had this:

@mixin ej1theme {
@include reindeer;

}

.miestilo{
font-size:25px;
color: red;
}

Instead of this:

@mixin ej1theme {
@include reindeer;
.miestilo{
font-size:25px;
color: red;
}
}

Thanks!

Good you solved it.

.ej1theme .v-widget
is stronger than
.miestilo

that is why it got overridden