Border & sizing Problem [fixed]

Vaadin 6 / 7 / 8 Framework UI
1

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!

Thanks!!

2

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]
x[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.addStyleName("myBorderStyleLayoutName");
vLayout.setSpacing(true); //otherwise the border will be too close to the components added to the vLayout

vLayout.addComponent(myComponent);
...

Finally add the border-hack-style:


.v-verticallayout-myBorderStyleLayoutName{
        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…


.rCorner{
 border-radius:5px;
 moz-border-radius:5px;
}

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…

3

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.