This is a side panel. Drag the splitter to the right, up to 500 pixels wide.

This is a top panel. Drag the splitter below, up to 500 pixels tall.

Splitters Example

This is an example of using JSLayout to create dynamic layouts, even when they are modified programmatically by JavaScript.

In this example, the two splitters are created by JavaScript on page load and attached to their respective panels. The calculate() function of the LayoutManager is called after setting up the layout, as usual. When a splitter is dragged, its content box dimension (width or height) are changed via CSS, and all that is needed is a subsequent call to the recalculate() function to update the layout. Splitter's are just a sample of what's possible with a flexible layout.

There is one caveat with the vertical splitter: when any non-flexible horizontal child dimension of a horizontally-oriented box is changed, the minimum size of must be updated so that the content panel doesn't overflow or stay too wide. This is easily done by calling the updateOrientationMinima() function of the layout manager.