Border & sizing Problem [fixed]

Hi all,

I finally found out that Vaadin doesn’t support borders set up in the css… That is very unhandy by the way and I really wonder why there hasn’t been a fix yet.

A method “setBorder(true)” would help, wouldn’t it? The layout calculator could handle only these Layouts in a different way, so the rendering time wouldn’t be too bad, huh???

Anyway, I am really angry somehow, because none of the solutions seem to work. I searched for days and ended up hacking the Layout by setting the width and hight to less then 100%. Don’t like that.

I tried to use a Panel, as mentioned in other threads, but no border at all. I use chameleon theme. In the sampler there are different versions of the Panel, with or without border… Unfortunately, I didnt find out how to toggle the border.

Did anyone found a WORKING solutioin for adding borders??

Please help me!


I found out a solution by myself. It’s stil a hack but it works GREAT.

Why try adding a border if vaadin just doesn’t “like” it? Well, sometimes borders are very nice to have, so let’s draw them differently:

All you need is an image with the dimension [borderWidth]
. (Probably nice to let Java generate it…) and the following css applied to your layout:

Assume we have a

VerticalLayout vLayout = new VerticalLayout();
vLayout.setSpacing(true); //otherwise the border will be too close to the components added to the vLayout


Finally add the border-hack-style:

        background-image: url(img/gg/border/3_FFFFFF.png),url(img/gg/border/3_FFFFFF.png),url(img/gg/border/3_FFFFFF.png),url(img/gg/border/3_FFFFFF.png);
	background-position: top left, top left, top right, bottom left;
	background-repeat: repeat-x, repeat-y,repeat-y,repeat-x;

“3_FFFFFF.png” is an image which is all white (#FFFFFF) and has a size of 3x3 pixels.

It is important to know that the “multiple backgrounds” are only supported since CSS 3.0 as far as I know.

Anyway, I tested my vaadin-sizecalculations-friendly border-hack on Chrome, IE9, and latest Firefox (12.0 I guess).
As far as I know all other common browsers should support it, probably versions of IE < 9.0 won’t.

I hope this helps other people not trying to set “border: 3px solid blaaa” for more than two days in vaadin… :stuck_out_tongue:

I have added a “rCorner” Style as well, which makes the border edges rounded, even with my hack…


Maybe I forgot something important else than (very old) browsers won’t render correctly (well still sizing will be nice, but no borders, probably users with old-browser can live without them?)

Another idea I’ve just had is to use a GridLayout and put empty but background-colored Labels into the north,south,east and west cell. The real Component will be put in to the center cell. Don’t know if that would work as well…

CssLayout is meant to be used when you want to use a set of custom css on layouts. It’s great when you want to modify borders, margins or paddings. I never put those css commands on any other layout. Instead I wrap what I want into a CssLayout.

Note that the CssLayout has three div’s within each others, and some commands work on some level while others work on another. I wouldn’t modify the outermost div because margins/borders/padding to it will increase it’s size and mess with the size calcluations. The next level, v-csslayout-margins, however has width and height set to auto, which means that it will be as big as the outermost div and margins/borders/padding will be subtracted from it’s size. putting borders there should work nicely

Another option is to use box-sizing: border-box, which does so that margins/borders/paddings are always subtracted instead of added, even if the div has a set width. Personally I am not fond of it but the Vaadin framework uses it in many places and many developers use it to ease the theming. Maybe I’m just old school as I don’t want to mess with the box model :slight_smile: box-sizing is supported by IE 8 and up and all the other browser vendors.

The box-sizing issue is the main reason that Vaadin doesn’t support putting those three css properties on layouts. I have high hopes, however, that it will get better in Vaadin 7.