CSS Border Problem

Vaadin 6 / 7 / 8 Framework UI
1

Hi all,

I have a problem with giving a component a border.

Actually, the border itself is not the problem but vaadin not knowing about a border which was defined per CSS is causing problems.

Vaadin always gives component fixed widths and heights and uses overflow:hidden excessivly.

When adding a border to a component, vaadin doesn’t know that the component became 2 pixels wider and 2 pixels higher and it cropps these two pixels from the right and from the bottom because of overlow:hidden.

I think this is a common problem and it’s strange, I didn’t found a good solution to it …

Two ideas I could think of are:

  • using css-background-image with position:bottom, but then I only could place one border-piece
  • wrap a component in a component which is 2 pixels wider and higher

But both of these methods seem to be not the best solutions …

Isn’t there a way to tell vaadin that there is an extra of two pixels needed, so I can set a components size to e.g. undefined and vaadin knows the component will actually consume 2 pixels more than actually calculated/expeced, or something like this?

edit: One problem is that vaadin doesn’t support tables with colspan, so I tried to build my table with GridLayout. But I need my Border … Should I place a PanelLayout-Components inside the Grid and then style the border of the panel?

Please help me :slight_smile:

Thomas

2

Hi,

I suppose you’re using Vaadin 6, where this problem is apparent. Vaadin 7 is much better in this regard out of the box, but you can workaround this issue in Vaadin 6 most of the time also.

The first thing I would try is to set the component, where you’re applying the border, to use the border-box box sizing:

.my-component {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

This will instruct the browser to include the border inside the width and height of the element, and not draw it bigger than what Vaadin tells it to.

Another options is to try and set the border on some other element, possibly an inner element of the component, not the root element (if it has any child elements).