Very Basic Scheme Problem!

Flow
1

Hi,

First let me state that I’m new to Vaadin!

I’m trying a basic Vaadin7 project (Eclipse) with has a styles.css style file containing an entry like:

....
.vaadin7withshiro .v-formlayout-spacing > tbody > .v-formlayout-row > .v-formlayout-captioncell, .vaadin7withshiro .v-formlayout-spacing > tbody > .v-formlayout-row > .v-formlayout-contentcell, .vaadin7withshiro .v-formlayout-spacing > tbody > .v-formlayout-row > .v-formlayout-errorcell {
    padding-top: 8px;
}
....

In addition to that file I’ve a file called vaadin7withshiro.scss holding an entry like:

.v-formlayout-spacing { padding-top: 80px; } When I understand it all correctly I’d expect the padding to be modified from 8 to 80 pixels, but that doesn’t seem to work!
However when I modify the padding to 80px within the styles.css it works?

Sorry, but can’t figure out why that’s the case?

Regards,
Gerard

2

The first selector in the CSS file is much more specific than the one you have in the SCSS file. In CSS the most specific selector will always override less specific selectors.

So you can either use a more specic selector in your SCSS or the use the !
important
 parameter on padding-top like so padding-top: 80px !important;

3

Did you compile the SCSS file to a CSS file before running the application? If not, Compile the SCSS file to CSS file using the Vaadin Compiler option in eclipse and then deploy your application.

4

Thanks for your answers, but still not very clear to me even after reading chapter 8 of the Vaadin book, sorry!

Any more elaborate description of this matter available somewhere?

Gerard