Top
SplitContainer - Configuring the split position
SplitContainer
The <SplitContainer /> gives you flexibility to configure the split position in a variety of ways: fixed position, percentage position and auto position. The split position can be relative to the first side/edge of the container or to the second side/edge of the container.
Example of possible values for the splitAt prop (or its uncontrolled version defaultSplitAt) are (let's assume a vertical <SplitContainer />):
  • 100 - the splitbar is positioned at 100px from the left edge of the container
  • '30%' - the splitbar is positioned at 30% width from the left edge of the container
  • 'auto' - the splitbar is positioned in such a way to accommodate the auto width of the left side of the container.
  • -100 - the splitbar is positioned at 100px from the right edge of the container
  • '-30%' - the splitbar is positioned at 30% width from the right edge of the container
  • '-auto' - the splitbar is positioned in such a way to accommodate the auto width of the right side of the container.
When using "auto" or "-auto", make sure the "auto" sized side only has one child and that child is not a text node.
Additionally, for vertical <SplitContainer />, make sure the "auto" sized side does not have display: block so that it does not fill all the available space horizontally.
When using the controlled splitAt prop, you need to make sure that you specify onResize(splitAt) to update the value of splitAt accordingly.
To improve performance when resizing, the <SplitContainer /> is configured by default with resizeProxy=true. If you want the resize to happen while dragging, without a proxy, use resizeProxy=false.
Unless <SplitContainer /> components (including the one in the above snippet) are given a height (or are in a layout that gives them a specific height), dragging the splitter to the sides can make the <SplitContainer /> grow in height, as soon as one of the sides reaches its minimum auto size.
Therefore, it's recommended that you give dimension to the <SplitContainer />, or be aware that it respects the auto size of its contents.
The split position can be constrained by using the minSize and maxSize props so as to enforce that container sides are at least a specified dimension and/or at most the given maximum size.
As soon as the dragging the splitbar hits the constrain points, the splitbar is constrained. In the default theme, it changes the background color to indicate that the constrain has been reached and that further resizing in that direction is not possible.
A very powerful value for the splitAt is "auto" (or "-auto") - so the splitbar is positioned at the auto size of the first (or the second) side of the container.
For "auto" split position in vertical <SplitContainer /> components, make sure the content inside the sides of the<SplitContainer /> has display: inline-block (or display: inline-flex) so it does not expand to fill the whole available width - otherwise, the expand transition may not work as expected, but rather will happen instantly.
When splitting at "auto" position, make sure the reference side (the side you are adjusting the "auto" size for) only has one child. This is needed so that the <SplitContainer /> only measures the auto size for that one child and adjusts the splitbar position accordingly.