You are viewing documentation for Vaadin Framework 8 and related products View documentation for Vaadin Framework 7 ›
Horizontal and Vertical Layouts · Vaadin
Vaadin Elements - Split Layout - Horizontal and Vertical Layouts

Horizontal and Vertical Layouts

Horizontal Layout

The vaadin-split-layout element can arrange the content elements in either a horizontal (side by side) or a vertical layout. By default, the horizontal layout is used.

Vertical Layout

You can change the layout to vertical by using the vertical attribute:

<vaadin-split-layout vertical>
  <div>Top content element</div>
  <div>Bottom content element</div>
</vaadin-split-layout>
vaadin split layout vertical
Figure 1. A screenshot of vaadin-split-layout with a vertical layout

You can also trigger the vertical mode by setting the property:

splitLayout.vertical = true;

Layouts Combination

For the layout contents, we usually use div elements in the examples, but you can use any other elements as well.

For instance, in order to have a nested vertical split layout inside a horizontal one, you can include vaadin-split-layout as a content element inside another split layout:

<vaadin-split-layout>
  <div>First content element</div>
  <vaadin-split-layout vertical>
    <div>Second content element</div>
    <div>Third content element</div>
  </vaadin-split-layout>
</vaadin-split-layout>
vaadin split layout combo
Figure 2. A screenshot of nested vaadin-split-layout elements with different layouts