Having trouble changing layout margins


I’m having trouble changing margins in a VerticalLayout. I want to customise the margin size for a particular layout but leave the default margins intact for all other instances of VerticalLayout in my application.

I am using a theme based on valo on vaadin 7.5.7. Many of the forum posts on this topic relate to vaadin version 6.

I have a file called cloudfreedom.scss which contains:

@import “…/valo/valo.scss”;

@mixin cloudfreedom {
@include valo;

// Insert your own theme rules here

    .v-layout-margin-left {padding-left:   100px;}


In my java source I have:


where scroll_layout is an instance of VerticalLayout. I was hoping that after compiling the theme (which I have done) the left hand margin would be 100 pixels.

I can make this work across the whole application using the line below at the top of my scss file but I only want the margin to work for one particular layout.

$v-layout-margin-left: 100px;

Can someone please help me with this. I have spent far too long already!


Typical, as soon as I post I get it working :slight_smile:

.mainapp-margins {
padding-left: 100px;