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.

Accessibility recommendation

Consider adding a tabIndex=0 prop 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.

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.

Resizable button indicator

By default, EuiResizableButton shows a grab handle indicator as a UI hint. For use cases where the resize behavior is "nice to have" but not a primary UX focus, or where there are many other busy UI elements on the page, you can set indicator="border" to display a subdued border element instead, which only provides resize affordance on hover or focus.

Custom resize logic

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.

Props

EuiResizableContainer

Extends ButtonHTMLAttributes


Prop	Description and type	Default value
Prop children#	Description and type Pure function which accepts Panel and Resizer components in arguments and returns a component tree Type: `(Panel: ComponentType<EuiResizablePanelProps>, Resizer: ComponentType<EuiResizableButtonProps>, actions: Partial<...>) => ReactNode`	Default value Required
Prop direction#	Description and type Specify the container direction Type: `"horizontal" \| "vertical"`	Default value `horizontal`
Prop onPanelWidthChange#	Description and type Pure function which accepts an object where keys are IDs of panels, which sizes were changed, and values are actual sizes in percents Type: `({}: { [key: string]: number; }) => void`	Default value
Prop onToggleCollapsed#	Description and type Type: `ToggleCollapseCallback`	Default value
Prop onResizeStart#	Description and type Called when resizing starts Type: `(trigger: ResizeTrigger) => void`	Default value
Prop onResizeEnd#	Description and type Called when resizing ends Type: `() => void`	Default value
Prop style#	Description and type Type: `CSSProperties`	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value

EuiResizableButton

Extends ButtonHTMLAttributes


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop isHorizontal#	Description and type Defaults to displaying a resizer for vertical (y-axis) resizing. Set to `true` to display a resizer for horizontal (x-axis) resizing. Type: `boolean`	Default value
Prop indicator#	Description and type By default, EuiResizableButton will show a grab handle to indicate resizability. This indicator can be optionally hidden to show a plain border instead. Type: `"border" \| "handle"`	Default value `handle`
Prop alignIndicator#	Description and type Allows customizing the alignment of grab `handle` indicators (does nothing for border indicators). Defaults to `center`, but consider using `start` for extremely tall content that scrolls off-screen Type: `"center" \| "end" \| "start"`	Default value `center`
Prop accountForScrollbars#	Description and type By default, EuiResizableButton will overlap into the panels before/after it. This can occasionally occlude interactive elements like scrollbars. To prevent this overlap, use this prop to remove the overlap for the specified side. Type: `"both" \| "before" \| "after"`	Default value
Prop ref#	Description and type Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} Type: `LegacyRef<HTMLButtonElement>`	Default value