border around layout

Vaadin 6 / 7 / 8 Framework UI
1

I’m trying to put a border around a CssLayout. The layout has to be full width. I’ve tried to add a style where i define: height: 100%; border-bottom: solid 1px;
Problem is that i always get scrollbars, which i don’t want.
I did see however that Panel solves this by adding an extra div at the bottom with style: height: 0px; border-top: solid 1px; and this seems to be working (without the annoying scrollbars which, in my solution still appear after adding ‘overflow: hidden !important’)
However, i don’t want to mess with widgets, so how do i just add 1 div with that border-bottom style? I’ve tried every layout (Absolute, Vertical, Css, Custom), but those always give me more than 1 div and result in no border being drawn…

Any suggestions?
Thanks

Jan

2

Most core layouts don’t directly support borders around their elements, which will break the layout calculations (border/padding/margin is not taken into account).

But with CssLayout, it’s possible to have a full width/height layout and a border. You just need to set the border on the
.v-csslayout-margin
 element (direct descendant of
.v-csslayout
). The root element (
.v-csslayout
) will get the size properties (100%), so adding a border to that will make it overflow it’s reserved space, hence the scrollbars.

Or, if you don’t need to support all possible browsers, just the modern ones, you can use
box-sizing: border-box;
 to make it work (bye bye IE).