Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
How to change the layout margins for few layouts in an application
Hi
I am using vaadin 7 and the valo theme. And I am new to all the scss/mixin stuff..
I have set the default layout margins and they work fine.. But there are few layouts in my application which needs a smaller layout margin.. Adding a style name to the layout and adjusting the padding in css does not seem to work. The layout goes past its boundaries due to the css padding.
How can I achieve this different layout margin needs with valo.. Please help.. Have been struggling for quite some time now..
I could not find any example on vaadin forums or any other site.
A big thanks in advance..
Hari
Hi,
you need to define a custom and default style in your theme.scss. (theme location / usage)
css/scss:
.mytheme{
//default margins for all layouts with margin enabled
.v-margin-left {padding-left: 15px;}
.v-margin-right {padding-right: 15px;}
.v-margin-top {padding-top: 10px;}
.v-margin-bottom {padding-bottom: 10px;}
//custom margins for layouts with specific css set and margin enabled
.custom-margins{
.v-margin-left {padding-left: 250px;}
.v-margin-right {padding-right: 250px;}
.v-margin-top {padding-top: 100px;}
.v-margin-bottom {padding-bottom: 300px;}
}
}
Now you can add the "custom-margins"-style to your layouts.
java:
//this layout has default margins
VerticalLayout defaultMargins = new VerticalLayout();
defaultMargins.setMargin(true);
//this layout has custom margins
VerticalLayout customMargins = new VerticalLayout();
customMargins.addStyleName("custom-margins");
customMargins.setMargin(true);
Then you have to compile your theme. (Compiling Sass Themes)
regards
Johannes
Just for reference..
Within the .custom-margins the classes need to be preceeded by "&" - i.e.:
...
.custom-margins{
&.v-margin-left {padding-left: 250px;}
&.v-margin-right {padding-right: 250px;}
&.v-margin-top {padding-top: 100px;}
&.v-margin-bottom {padding-bottom: 300px;}
}
Further more you could use relative values, e.g. $v-layout-margin-left/2 instead of 250px.