How to position a footer

Dear Vaadin community,

I have this little problem, i hope you will have a solution :

Step 1 : I create a VerticalLayout in the main windows

	VerticalLayout layout = new VerticalLayout();

Step 2 : i create a top banner

            Panel bannerTop = new Panel("");
            bannerTop .setWidth("100%");

Step 3 : i create some buttons, one per line
button1 = new Button(“some text”, this, “open2ButtonClick”);
layout.setComponentAlignment(totobutton, Alignment.MIDDLE_CENTER);

Step 4 : i create a footer (green line in the attached screenshot)
(not ok)

	Label elabel = new Label("<center><p style=\"background-color:rgb(1, 147, 213);font-size:10px;color:rgb(255,255,255)\">+
	"this web page is created with VAADIN</p><center>",Label.CONTENT_RAW);

layout.setExpandRatio(elabel, 1);
layout.setComponentAlignment(elabel, Alignment.BOTTOM_CENTER)
=> i was thinking these 2 last lines move the Label in the bottom of the web page, but it is not the case. It seems they are ignored.
Could you please tell me where i am wrong ?

VerticalLayout takes no more space than it has too, so I guess there won’t be an easy way, using the APIs. It might be easiest to just give the footer-label a stylename and add appropriate CSS.

Thank you for your reply

I do not know how to use CSS with Vaadin (and i never used CSS).
Is there a simple example of Css-Vaadin code ?


Unfortunately the bootstrapping of custom CSS is a bit complicated for the first time. Look at the book and read about Widgetsets … don’t have enough time left to prepare an example, sorry.

Ok, thank you Tobias

Suggestion to the Vaadin Team : it would be a good idea to create a Footer object !


Hi Eric,

It shouldn’t require any custom CSS to achieve what you’re trying to do.

But judging from the setCompositionRoot(layout); it seems you’re using a CustomComponent somewhere in the component hierarchy, and your vertical layout is inside that. So make sure the CustomComponent itself is also 100% high, otherwise the layout inside it will be something other than 100% high (and looking at the screenshot it looks like it is height=auto).

You can add ‘?debug’ after the URL of your app, and click the ‘AL’ button (Analyze Layouts), it should point out any issues in your layout structure.


Yes, there is a CustomComponent because i use the example given in the 4.3.1 section of the Vaadin book as a starting point for my project.
public class WindowOpener extends
implements Window.CloseListener {

I love the “?debug”. Here is what he says (colors are in relation with colored words in the code below) :

  • Window
    /e6f7d2 “Myproject Application” (height: MAIN WINDOW)
    • VerticalLayout/1a42792 (height: RELATIVE, 100.0 %)

      • WindowOpener
        /1bf3d87 (height: UNDEFINED)

        • VerticalLayout
          /5dd582 (height: RELATIVE, 100.0 %)
          Layout problem detected: A component with relative height needs a parent with defined height.
          Relative sizes were replaced by undefined sizes, components may not render as expected.


public class MaquetteVaadinAppli extends Application {
	private static final long serialVersionUID = 1L;

	public void init() {
		final [color=#a0335b]
[/color]mainWindow = new Window("Myproject Application");
		mainWindow.addComponent(new WindowOpener("Window Opener", mainWindow));

public class [color=#5b4bc5]
[/color]extends CustomComponent implements Window.CloseListener {
public WindowOpener(String label, Window main) {  //constructeur
		mainwindow = main;
[/color]layout = new VerticalLayout();
                Panel bannerDuHaut = new Panel("");

I do not know what to do to set the size of CustomComponent;

In your WindowOpener class constructor just call setSizeFull() or setHeight(“100%”); and you should be ok.

It works fine, thank you Jouni :grin:
(i also added ((VerticalLayout)mainWindow.getContent()).setSizeFull() into the init() method)