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

Hari Krishnan

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

Johannes Laidler

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)

(Layout Formatting info)

regards

Johannes

example.png (9.2 kB)

Daniel Schreiber

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.

Important Notice - Forums is archived

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Important Notice - Forums is archived

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

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.