Loading...
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.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Border & sizing Problem [fixed]

Frithjof Schaefer
9 years ago May 25, 2012 9:01am
Frithjof Schaefer
9 years ago May 25, 2012 9:56am

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... :-P

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...

Last updated on May, 25th 2012
Jens Jansson
9 years ago May 25, 2012 11:31am

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 :) 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.