Display problem: Can't see the right border of a div

Hi everyone,

I’m a recent user of vaadin (6.6.0), and I have difficulties to set border style. My problem is that I can’t see the right border. (the red one my code example )
With a console like FireBug or the one with Chrome, it seems that the subLayout width is larger than the main layout.

I use vaadin method to display layout, (setSizeFull, setSpacing etc… ) and some css to add color and font size.

Someone knows how to fix this problem?


My code:

public class MyprojecApplication extends Application {
    public void init() { 
        Window main = new Window("Hello window"); 
		Panel mainPanel = new Panel();
		VerticalLayout verticalLayout = new VerticalLayout();

		VerticalLayout subLayout = new VerticalLayout();

		subLayout.addComponent(new Label("Hello World!"));


and the css :

@import url(../runo/styles.css);

	border  : 1px solid red;


the size calculations of layouts will not end up in correct values if you add border to them. Instead, use a Panel component, add a specific style name for it and use that in your CSS to style the existing borders in the Panel.


Thanks for the quick answer.

So I will use Panel… it’s much heavier to override css in this case, but this works.

I hope that the the size calculations will be fixed in the future :smiley:


Unfortunately I do not think this will be fixed in the near future at least. As far as I know, CSS borders/paddings/margins are ignored here on purpose to keep the client-side code a bit lighter. If you need these features, you can use a Panel. Then there is also the CSSLayout and several Add-On layouts in the directory which may support direct CSS styling.


ok, I’ll look at add-ons.
I was just surprised that it is not supported by the standard version of vaadin.

Thanks again for your help.