Vaadin Elements - Split Layout - Initial Splitter Position

Initial Splitter Position

The initial splitter position is determined from the sizes of the content elements inside the split layout. Therefore, changing width on the content elements affects the initial splitter position for the horizontal layouts, while height affects the vertical ones.

When the total size of the content elements does not match the layout, the content elements are scaled proportionally.

You can customize the initial splitter position by resizing the content elements. For example, using inline styles:

  <div style="width: 75%;">First content element</div>
  <div style="height: 25%;">Second content element</div>
vaadin split layout splitter position
Figure 1. A screenshot of vaadin-split-layout with custom initial sizes

When setting initial sizes with relative units, such as percentages, it is recommended to assing the size for both content elements.