Overwriting vaadin css Tags

Hello there,

in my theme I have special requirements for absolute layouts.
such as that the overflow scrolls.

therefor i have written into my theme scss file:


.v-absolutelayout {
	overflow: auto;
}
	
	
.v-absolutelayout-wrapper {
	position: absolute;
	overflow: auto;
}

After I compiled the theme the resulting style.css file contains two entries:


.mytheme .v-absolutelayout-wrapper {
	position: absolute;
	overflow: hidden;

.mytheme .v-absolutelayout-wrapper {
	position: absolute;
	overflow: auto;
}

now my application seems to ignore my entry and is using the first entry instead.
my question is now : how can i manage to remove the first entry. which is generated automatically??

thanks for any help in advance

steffan

The first rule apparently comes from the built-in theme that is mixed in to the custom theme with @include, and the compiler does not currently optimize rules so that it would leave overridden rules out.

The bigger question is, why the first rule with identical selector isn’t it overridden in the browser. Perhaps you have overlooked something, like it’s not using the correct compiled CSS or something?

Hmmm,

thanks for your quick reply. The only thing i can image is that the tag:


@include base;

which I included , could cause the problem. Everything else i include are my own files.

bye
Steffan

Yes you need to @include a theme, although the built-in “base” theme is a bit unusual as it’s a bit limited.

You could have problems with the rules if they are in wrong order in the compiled CSS, so that the rule from the base theme overrides your rule and not the other way around. The solution is to make the selector of your rule more specific, so that it matches some “.a .b .c” instead of just “.a .b” or “.b .c”.