How to change the layout margins for few layouts in an application

Flow
1

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

2

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:

[code]
//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);

[/code]Then you have to compile your theme. (
Compiling Sass Themes
)

(
Layout Formatting info
)

regards

Johannes
23009.png

3

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
.