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.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
CSSLayout usage
Hi everyone,
I'm trying to add a border to a layout using css but with no luck, the right border always gets cropped, I've been reading everywhere that CSSLayout is the answer but I wasn't able to use it successfully, does anyone have an idea about this?
This is the CSS
.page-label-container {
background: url("../img/label_bg.png") repeat-x scroll center top #FFFFFF;
border: 1px solid #B6B6B6;
border-radius: 0 0 5px 5px;
}
That border doesn't work on the outer element of CssLayout, because if you set for example 100% width for the layout and add it inside a VerticalLayout, then the 100% is transformed to pixel width in JavaScript. The default box sizing doesn't take the border in account so it's cut out. Try this:
.page-label-container > .v-csslayout-margin {
border: 1px solid #B6B6B6;
border-radius: 0 0 5px 5px;
}