Get started
Loading...
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.

Product icon
TUTORIAL

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

Where to include a web components css file when integrating a third party w by Martin Vyšný, 1 week ago
Recent Posts
Vaadin Forum1. Vaadin Flow - Java

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

Hari Krishnan
6 years ago Feb 08, 2016 7:55pm

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

Johannes Laidler
6 years ago Feb 09, 2016 1:53pm

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

Daniel Schreiber
5 years ago Oct 11, 2016 1:10pm

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.