Question on Layout sizes.

Hello all, I am new to Vaadin. After reading the documents I tried to make a small and simple CRUD app with Vaadin. In my app, I have a HomeUI class that extends UI, within it, I made a VerticalLayout and set that as my root layout. Inside that root(VerticalLayout) I have a HorizontalLayout, within that HorizontalLayout I have a Grid and a FormLayout. Initially I leave all the sizes as default, after all is done I have Grid followed by the FormLayout, they were close together. This made sense because the root VerticalLayout has 100% width as default, while the inner HorizontalLayout has undefined width, and it expended to accommodate the Grid and FormLayout inside it. BUT, when I tried to addComponentsAndExpand the Grid before addComponent the FormLayout, the grid stretch the entire screen and the FormLayout was no where to be seen. The only way to stretch the Grid and still have the FormLayout is to call setSizeUndefined in the FormLayout. Why is this? Also, how does the Grid knows how much space it needs?

public class HomeUI extends UI {

	VerticalLayout root;
	Content content;
	protected void init(VaadinRequest request) {

	private void setRootLayout() {
		root = new VerticalLayout();


public class Content extends HorizontalLayout {
	private StudentRepo repo;
	List<Student> studentList = new ArrayList<>();
	Grid<Student> grid = new Grid<>(Student.class);
	private void init() {
	public Content() {
		grid.setColumns("firstName", "lastName", "email");
		addComponents(new Form());
	private void updateGrid() {
		studentList = repo.findAll();

public class Form extends FormLayout{
	StudentRepo repo;
	TextField firstName = new TextField("First Name");
	TextField lastName = new TextField("Last Name");
	TextField email = new TextField("Email");
	Button save = new Button("Save");
	Binder<Student> binder = new Binder<>(Student.class);
	public Form() {
		setCaption("Student Information");
		addComponents(firstName, lastName, email,save);
		save.addClickListener(event -> System.out.println(new Student(


I suppose FormLayout has a 100% width by default, and it collapses when you expand some other component in the horizontal layout. Try setting the width of the form to undefined. At least if you set it to an explicit width (like 300px) it should show up.

Oh, and HorizontalLayout might be undefined wide by default? So setting it to 100% would be a good idea as well.