VerticalLayout en VerticalSplitPanel


I want to have a textfield on top and a splitpanel on the rest of the page.
On the splitpanel there must be 2 tables.

I cannot find a way to get the layout I want. The splitpanel does not takes the all the free space. Does anyone have a idea?


package xso.mailfinder.web;

import java.util.Arrays;
import java.util.List;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.Title;
import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.Grid;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.VerticalSplitPanel;

@SuppressWarnings( "serial" )
@Title( "Test" )
@Theme( "valo" )
public class MyUI extends UI

  protected void init( VaadinRequest request )
    VerticalLayout mainLayout = new VerticalLayout();

    TextField textField = new TextField();
    textField.setHeight( "40px" );
    textField.setWidth( "400px" );

    mainLayout.addComponent( textField );

    VerticalSplitPanel splitter = new VerticalSplitPanel();
    splitter.setFirstComponent( createTable() );
    splitter.setSecondComponent( createTable() );
    splitter.setSplitPosition( 50, Unit.PERCENTAGE );

    mainLayout.addComponent( splitter );

    setContent( mainLayout );

  class Person
    private final String name;
    private final int birthYear;

    public Person( String string, int i )
      name = string;
      birthYear = i;

    public String getName()
      return name;

    public int getBirthYear()
      return birthYear;

  private Grid<Person> createTable()
    // Have some data
    List<Person> people = Arrays.asList(
        new Person( "Nicolaus Copernicus", 1543 ),
        new Person( "Galileo Galilei", 1564 ),
        new Person( "Johannes Kepler", 1571 ) );

    Grid<Person> grid = new Grid<>();
    grid.setItems( people );

    grid.addColumn( Person::getName ).setCaption( "Name" );
    grid.addColumn( Person::getBirthYear ).setCaption( "Year of birth" );

    return grid;


Try calling mainLayout.expand(splitter); after adding it to the layout.

Vaadin 8 does not have a method expand() in VerticalLayout.
I use mainLayout.addComponentsAndExpand( splitter ); now. That works!