How to put footer at the bottom of the page

Flow
1

Hello,

I’m new to vaadin and so far really like it.
I want to build a simple app with a standard layout, quite similar to the one used on vaadin website, i.e. a header, the main content in the center and a footer at the bottom of the page.

I have actually 2 problems/questions in trying to do that :

  • if I have a small content, I still would like to have the footer at the bottom of the screen (with blank above if needed). In gwt, I was using the Dock Panel which is very easy to use. Is there a way to reproduce the same layout?

  • I am using my own theme based on the reindeer one. I’ve just added different background color for my header and footer. But I can see that there is a big space on the left and right side of my footer and header, which are VerticalLayout.
    I would think that there is a padding applied somewhere in the css but I couldn’t find where.
    What is the best way to remove the space?

Thanks for your help.

2

I found the part of css in the file styles.css :

.v-verticallayout-margin-right {
padding-right: 0px;
}

it was simple but I miss it first time I checked.

3

Did you want the footer to always be visible at the bottom of the screen or only when the contents are small enough that a scrollbar won’t be needed? I’m not sure how the latter would be achieved, but the first you should be able to do with something like this:

Window mainWindow = new Window("YourApplication");
VerticalLayout mainLayout = new VerticalLayout();
mainLayout.setSizeFull(); // to ensure whole space is in use
mainWindow.setContent(mainLayout);
setMainWindow(mainWindow);

VerticalLayout header = new VerticalLayout();
Panel content = new Panel();
content.setSizeFull(); // to ensure the panel only takes the available space
VerticalLayout footer = new VerticalLayout();

mainLayout.addComponent(header);
mainLayout.addComponent(content);
mainLayout.addComponent(footer);
mainLayout.setExpandRatio(content, 1); // to determine which component takes the excess space

VerticalLayout contentLayout = new VerticalLayout();
contentLayout.setSizeUndefined(); // to ensure a scrollbar appears if the content won't fit otherwise
content.addComponent(contentLayout);
4

You could use the BorderLayout component for this.

It gives you Top/Bottom/Left/Right panels + the main content area.

http://vaadin.com/directory#addon/borderlayout

André

5

I’m attempting to implement what Anna described (“in the latter”) and illustrated in this article:

http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/

I think I successfully applied this article’s technique to Vaadin 7 custom layout (page looks right and no layout errors in debugger)

@Theme(“mytheme”)
public class DemoUI extends UI {
@Override
protected void init(final VaadinRequest request) {
setContent(new Shell());
}
}

public class Shell extends CustomLayout {

public Shell() {
    super("shell");
    addStyleName("shell");
    setSizeFull();

    addComponent(new LoginComponent(), "content");
}

}

shell.html:

Header

Footer

mytheme.css:

@import “…/reindeer/legacy-styles.css”;

html,
body {
margin:0;
padding:0;
height:100%;
}

.shell {
height:100%;
overflow: auto;
}

#wrapper {
min-height:100%;
position:relative;
}

#header {
padding:10px;
background:#5ee;
}

#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}

#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background:#ee5;
}

The only CSS addition that I made to the article was the addition of:

.shell {
height:100%;
overflow: auto;
}

As far as I can tell it is working, i.e. the footer stays at the bottom and browser window scrolls when necessary.

However there is one additional feature I would like in some situations I would like the content to expand
to fill the size of the browser. For example if there is a table in the center content I would like it to expand to
fill the space available to it.

public class LoginComponent extends VerticalLayout {

public LoginComponent() {
    final Table table = new Table();
    table.addContainerProperty("First Name", String.class,  null);
    table.addContainerProperty("Last Name",  String.class,  null);
    table.addContainerProperty("Year",       Integer.class, null);

    for (int i = 0; i < 100; i++) {
        table.addItem(new Object[] {
                "Nicolaus","Copernicus",new Integer(1473 + i)}, new Integer(1 * i));
        table.addItem(new Object[] {
                "Tycho",   "Brahe",     new Integer(1546 + i)}, new Integer(2 * i));
        table.addItem(new Object[] {
                "Giordano","Bruno",     new Integer(1548 + i)}, new Integer(3 * i));
        table.addItem(new Object[] {
                "Galileo", "Galilei",   new Integer(1564 + i)}, new Integer(4 * i));
        table.addItem(new Object[] {
                "Johannes","Kepler",    new Integer(1571 + i)}, new Integer(5 * i));
        table.addItem(new Object[] {
                "Isaac",   "Newton",    new Integer(1643 + i)}, new Integer(6 * i));
    }
    addComponent(table);
}

}

It’s pretty easy to do using the API (no CSS tricks necessary below) when the footer is always visible but I’m scratching my head
on how to make the table expand in the “footer on the bottom” layout I created.

Any advice?

Thanks

protected void init(final VaadinRequest request) {
    full();
}

private void full() {
    final VerticalLayout mainLayout = new VerticalLayout();
    mainLayout.setSizeFull(); // to ensure whole space is in use
    setContent(mainLayout);

    final VerticalLayout header = new VerticalLayout();
    Panel content = new Panel();
    content.setSizeFull(); // to ensure the panel only takes the available space
    final VerticalLayout footer = new VerticalLayout();

    mainLayout.addComponent(header);
    mainLayout.addComponent(content);
    mainLayout.addComponent(footer);
    mainLayout.setExpandRatio(content, 1); // to determine which component takes the excess space

    final VerticalLayout contentLayout = new VerticalLayout();
    contentLayout.setSizeUndefined(); // to ensure a scrollbar appears if the content won't fit otherwise
    content.setContent(contentLayout);

    header.addComponent(new Label("Header"));
    footer.addComponent(new Label("Footer"));

    contentLayout.setSizeFull();
    final Table table = new Table();
    table.addContainerProperty("First Name", String.class,  null);
    table.addContainerProperty("Last Name",  String.class,  null);
    table.addContainerProperty("Year",       Integer.class, null);

    for (int i = 0; i < 100; i++) {
        table.addItem(new Object[] {
                "Nicolaus","Copernicus",new Integer(1473 + i)}, new Integer(1 * i));
        table.addItem(new Object[] {
                "Tycho",   "Brahe",     new Integer(1546 + i)}, new Integer(2 * i));
        table.addItem(new Object[] {
                "Giordano","Bruno",     new Integer(1548 + i)}, new Integer(3 * i));
        table.addItem(new Object[] {
                "Galileo", "Galilei",   new Integer(1564 + i)}, new Integer(4 * i));
        table.addItem(new Object[] {
                "Johannes","Kepler",    new Integer(1571 + i)}, new Integer(5 * i));
        table.addItem(new Object[] {
                "Isaac",   "Newton",    new Integer(1643 + i)}, new Integer(6 * i));
    }

    contentLayout.addComponent(table);
    contentLayout.setExpandRatio(table, 1.0f);
    table.setSizeFull();

}