But i end up with a littlie space on the right side.
From firebug i saw that the width of the element is calculated correctly to be the same as the first div (which contains this element) inside the vertical layout div. Unfortunately I can’t change the div inside the vertical layout since the style with the width is inline (unless i use something like inside_div_element_blahblah[style]
{…} but i don’t think is very elegant)
So what do you think i should do to overcome this?? Am I missing something?? Does it have to do with VerticalLayout? Should I try other layouts?
With Vaadin, the layout components handle some of their own size calculations. Thus, their sizes should be set with the appropriate Java methods, not in CSS.
The Vaadin programming model is similar to programming a desktop application with Swing or SWT. For instance, to have a status bar at the bottom, you can have a top-level VerticalLayout in your window where you have the main application area (with a non-zero expand ratio) and then a fixed size status bar component. You should not need to write CSS yourself for such cases.
As Henri said, the server side defined size (100% width for both Panel and Label) overrides your values defined in CSS. If you still insist to size your components with CSS, it is safest to call setSizeUndefined for those components. Then Client side engine will not define width and the value from your css file will be used instead.
setSizeUndefined() does exactly what you said and it works nicely. I used it on the statusBar panel and then everything worked fine!!
However, I noticed that If the css is skiped, as Henri advised, everything will work as expected
only if a VerticalLayout is explicitly set for the content of the mainwindow . As it can be seen from the code a layout is never set via setContent() method for the window instead the default layout of the content is beeing used, which is actually a VerticalLayout.
But in this case it does not work. It only works in the following case,
Panel statusBar = new Panel();
//statusBar.setStyleName("statusbar"); no need for css
VerticalLayout vLayout = new VerticalLayout();
mainWindow.setContent(vLayout);
mainWindow.addComponent(statusBar);
Can someone please explain why??
I assume that the initial VerticalLayout has some properties set that the new instance of VerticalLayout doesn’t (although I didn’t notice anything on the variables when debugging)…
By default, the width of a VerticalLayout is 100% but its height is undefined, i.e. determined by its content.
As you want the status bar to always be at the bottom of the window, not the document, you would need to first set the size of that main layout to 100% e.g. by calling setSizeFull() on it. If you access that layout via getContent(), you may need to cast it first.
At least the default main window layout has margins set to true, while a new instance of a VerticalLayout doesn’t have margins enabled.
Margins are applied as paddings in the DOM, so they will affect the overall size of the layout, and if you specify 100% in your CSS, it will definitely be wider than 100%.
