Nesting

In this example we are going to follow from the Basic example. but instead of having buttons as the components we are going to use ResponsiveLayouts and nest our layouts.

ResponsiveLayout responsiveLayout = new ResponsiveLayout();
        ResponsiveRow row = responsiveLayout.addRow();

        row.addColumn().withDisplayRules(12, 6, 4, 4).withComponent(createNestedLayout());
        row.addColumn().withDisplayRules(12, 6, 4, 4).withComponent(createNestedLayout());
        row.addColumn().withDisplayRules(12, 6, 4, 4).withComponent(createNestedLayout());

This is a method to create the nestedLayout -for brevity-

public ResponsiveLayout createNestedLayout() {
    ResponsiveLayout nestedLayout = new ResponsiveLayout();
    ResponsiveRow nestedLayoutRow = nestedLayout.addRow();

    Label label = new Label("Title!");
    label.setSizeFull();

    Button button = new Button("", FontAwesome.ANCHOR);
    button.addStyleName(ValoTheme.BUTTON_PRIMARY);
    button.setSizeFull();

    TextField field = new TextField();
    field.setInputPrompt("Description");
    field.setSizeFull();


    nestedLayoutRow.addColumn().withDisplayRules(12, 6, 4, 4).withComponent(label);
    nestedLayoutRow.addColumn().withDisplayRules(12, 6, 4, 4).withComponent(button);
    nestedLayoutRow.addColumn().withDisplayRules(12, 6, 4, 4).withComponent(field);


    return nestedLayout;
}

We see that when a ResponsiveLayout is nested in a ResponsiveColumn the rules given to the nested ResponsiveLayout Columns still apply inside the width of the ResponsiveColumn its contained in.

---

##Here is the layout that we created.

Computer

Tablet

Phone