Simple layout issue: panel not filling all space

Hi all,

Having read the
layout section of The Book
a couple times, I think there’s some small piece of info lost in my brain somewhere. Can you please tell me what I’m missing? I have a very simple page with 3 panels arranged vertically. The top and bottom ones have fixed height, and I’d like the middle one to fill the rest of the space and expand/contract if the window is resized.

Here’s the entire app:

public class VaadinTest extends Application {

    public void init() {
        Window mainWindow = new Window("Panel Size Test");

        Panel topPanel = new Panel("top");
        topPanel.setHeight(80, Sizeable.UNITS_PIXELS); // fixed

        Panel midPanel = new Panel("middle");

        Panel bottomPanel = new Panel("bottom");
        bottomPanel.setHeight(80, Sizeable.UNITS_PIXELS); // fixed



    @WebServlet(urlPatterns = "/*")
    public static class MyServlet extends AbstractApplicationServlet {

        protected Application getNewApplication(HttpServletRequest request) throws ServletException {
            return new VaadinTest();

        protected Class<? extends Application> getApplicationClass() throws ClassNotFoundException {
            return VaadinTest.class;

When I view the page, it’s as if the top/bottom panels have a bunch of empty space below them that is expanding the same amount as the middle panel. Put another way, the middle panel is really taking up 33%of the height and the blank spaces under top/bottom panels are also filling 33% each. This is what I see when highlighting the divs in the Chrome developer tools. Pic is attached of the screen.

Can someone tell me where all this extra space is coming from? This is with Vaadin 6.7.3.


Ok, sigh. Sorry. False alarm. Nothing to see here…

Immediately after posting I realized I needed to set the panel’s size to 100%
tell the layout that I only want that component to expand:

setExpandRatio(midPanel, 1)

That’s all it took.