Resizable container

---

This component is handy for various resizable containers. EuiResizableContainer uses the React Render Props technique to provide EuiResizablePanel and EuiResizableButton components for layout, and actions for custom handling collapse and resize functionality in your app. Wrap parts of your content with the EuiResizablePanel component and put the EuiResizableButton component between.

note

Consider adding a tabIndex for keyboard accessibility

Add a prop tabIndex=0 to the EuiResizableContainer if it is a fixed height or has a lot of content. This ensures keyboard users can set focus on the container and scroll to the bottom using arrow keys.

Horizontal resizing

Simple resizable container with two panels and a resizer between. This is the most common case you'll need in your app. Just drag the resizer button between two panels to increase/decrease panel size. You could also use arrow keys ←|→ on the focused resizer button to change panel size.

• add initialSize in percents to each panel to specify the initial size of it. Other calculations will be encapsulated, you don't worry about it.
• add scrollable=false prop to a panel to eliminate overflow scrolling

Resizable panel options

Each EuiResizablePanel is simply an EuiPanel wrapped with a <div> for controlling the width. It stretches to fill its container and accepts all of the same EuiPanel props to style your panel.

The default props clear most of the EuiPanel styles, but you can add them back in with color, hasShadow, and paddingSize.

Horizontal resizing with controlled widths

Sometimes it's necessary to control panel sizes from the outside. For example to store sizes in localStorage or change the layout with predefined sizes. Here is the onPanelWidthChange and size props for help. If you use such an approach, you have to specify an id prop for each panel to track their sizes.

warning

Required properties

Either initialSize or size must be specified. The size prop is for cases where a parent component will control sizing updates.

Vertical resizing

Set direction=vertical on EuiResizableContainer to set a vertical orientation of the resizable panels.

Resizable container callbacks

EuiResizableContainer supports onResizeStart and onResizeEnd callback props to listen for when resizing starts and ends. The onResizeStart callback is passed a trigger: 'pointer' | 'key' parameter to determine which user action triggered the resize.

Collapsible resizable panels

Panels can be designated as collapsible, which allows them to hide content and automatically resize to a minimal width. The intent of collapsible panels is to enable large, layout-level content areas to cede space to a main content area. For instance, collapsing an action panel to allow more focus on the primary display panel.

Use the mode prop on an EuiResizablePanel to mark it as collapsible or main. From the provided mode configuration, the EuiResizableContainer will determine placement of the toggle button and functionality of panel collapsing. To prevent empty states, not all panels can be mode=collapsible (there must be at least one mode=main panel).

Responsive layout

It is possible to dynamically change the direction prop to allow for adapting layouts to screen size. Resize the window to see the panel orientation change.

Collapsible panel options

An EuiResizablePanel marked as mode={['collapsible']} also accepts configuration options for the collapsible button by passing a second parameter, in the form of:

mode={['collapsible', {
  'data-test-subj': 'panel-1-toggle',
  className: 'panel-toggle',
  position: 'top',
}]}

Collapsible panels with external control

EuiResizableContainer also provides action hooks for parent components to access internal methods, such as EuiResizablePanel collapse toggling. The actions are accessible via the third parameter of the render prop function.

Note that when bypassing internal EuiResizableContainer logic, it is possible to create situations that would otherwise be prevented. For instance, allowing all panels to be collapsed creates a scenerio where your app will need to account for empty state and accesibility in regards to keyboard navigation.

Custom collapse button

You can also provide an external collapse button for custom placement and look within your panel with mode={['custom']}. When collapsed, however, the default collapsed button will be used for users to uncollapse the panel.

For consistency, we recommend the usage of the menuLeft, menuRight, etc, icon types.

Custom resizable button

If you want to break out of EuiResizableContainer usage completely, you may import the standalone EuiResizableButton component. You will need to attach your own mouse, touch, and keyboard events and logic to the button - see the example below.