Adjusting margins of a vertical layout using css doesn't work


We are using Vaadin 6.8.7, and need to add a single-pixel margin to a layout in our application.

I have followed instructions regarding the margins section the the Vaadin book (Section 6.13) and using that example, here’s my own:

.u-tileable-container.v-margin-left   {padding-left:   10px;}
.u-tileable-container.v-margin-right  {padding-right:  20px;}
.u-tileable-container.v-margin-top    {padding-top:    40px;}
.u-tileable-container.v-margin-bottom {padding-bottom: 80px;}

Then used a VerticalLayout as you would expect - calling setMargin(true):

VerticalLayout vl=new VerticalLayout();

But I still get the standard 8px margins on the VerticalLayout. Also, I cant see any ‘v-margin-left’ etc styles in any divs in the resulting html (using Chrome’s search feature).

How can I adjust the margins using CSS - is there something else I am missing?

Thanks in advance for your help!

I think it would work better when you use: .u-tileable-container{ //the below will add the different margin sizes to the layout margin-left:10px; margin-right: 20px; margin-top: 40px; margin-bottom: 80px; //if you only need a one pixel margin around every side don't use the above but the below instead: margin: 1px; } and then not use vl.setMargin(true). In case some of these styles still don’t get reflected in the app try adding !important like
margin: 1px !important;


there’s a few issues in your code:

  1. I think you’ve been reading the Vaadin 7 instructions. For Vaadin 6, the CSS rule would be (notice the space):
.u-tileable-container .v-verticallayout-margin-top {
    padding-top: 40px;
  1. When adding style names, you shouldn’t provide the ‘.’ so you can just add “u-tileable-container” as the style name.

Hi Marius, thanks for the prompt answer.

Actually I need to add a single pixel border to the layout, so [code]
.u-tileable-container {
border: 1px solid black;

should do the trick. However, with VerticalLayout (indeed any of the OrderedLayouts), the width and height is exactly calculated and set on the outer div’s style attribute. This means the border on the right and bottom is always cut off.
I was trying to see if setMargin(true) will enable additional divs immediately within the outermost VerticalLayout’s div, (with appropriate classes such as .v-margin-left etc), which I could then add the border too. (This is sort of implied in the Book of Vaadin section on layout, 6.13.5), but I can’t see this happening.

If you can pint to any other way to enable a single pixel border on layouts that would solve my problem!

The only way I know of is to enable the layout margin (which is a padding of 18px) and overriding it with css so that padding: Npx !important, margin: Mpx !important, border: 1px with N+M=17. This is not an officially recommended solution by any means, as it is very prone to breaking; but I have made e.g. rounded backgrounds for panels this way.

Indeed this is quite probable. I wanted to check this from the web book and apparently all the navigation links from the Vaadin 6 book take you to the Vaadin 7 book section…

Vaadin 6 version of the
layout margins section is here

Thanks Marko - Before I read your post, I tried clicking on the ‘Vaadin 6 Book’ link several times and finally downloaded the pdf version, which confirmed what you just said about the links to 7.

I’ll try those examples and Thomas’ suggestion as well.

Ok using the Vaadin 6 example, I can adjust the vertical layout’s margins.
I still can’t add the border to the main VerticalLayout div or its first child as this Vaadin margins simply adjust the padding, and the border gets clipped as before. (If anyone knows of another way please let me know).

However, as my inner content is not transparent, I can simply change the background of the vertical layout to black, and then its first direct child to white, to achieve what I want. Here is the css incase anyone else finds it useful:[code]

.u-tileable-container .v-verticallayout-margin
padding: 1px;
background-color: black;
div.u-tileable-container > div:first-child
background-color: white;