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

Flow
1

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?

Thanks!

My code:



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

		VerticalLayout subLayout = new VerticalLayout();
		subLayout.setSizeFull();

		mainPanel.addComponent(verticalLayout);
		verticalLayout.addComponent(subLayout);
		subLayout.setStyleName("redBorder");
		subLayout.addComponent(new Label("Hello World!"));
		
		main.addComponent(mainPanel);
		
		setTheme("contacts");
    }

}

and the css :


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

.redBorder{
	border  : 1px solid red;
}
2

Hi,

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.

-Tepi

3

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:

Jo.

4

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.

-Tepi

5

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.