Skip to main content
Elastic UI
Elastic UI
Getting startedComponentsPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Overview
  • Layout
  • Containers
    • Accordion
    • Bottom bar
    • Card
    • Flyout
    • Modal
    • Panel
    • Popover
    • Resizable container
    • Tabs
  • Navigation
  • Display
  • Forms
  • Tabular content
  • Templates
  • Editors and syntax
  • EUI
  • Containers
  • Resizable container

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
Loading...

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.

Loading...

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.

Loading...

Vertical resizing

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

Loading...

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.

Loading...

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).

Loading...

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.

Loading...

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:

✄𐘗
ts code block:
✄𐘗mode={['collapsible', { 'data-test-subj': 'panel-1-toggle', className: 'panel-toggle', position: 'top', }]}
Loading...

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 scenario where your app will need to account for empty state and accessibility 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 expand the panel.

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

Loading...

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.

Loading...

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.

Loading...

Props

EuiResizableContainer

Extends HTMLAttributes
𐘂𐘂
✄𐘗✄𐘗
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
↵
𐘂𐘂
Edit this page

Previous
Popover
Next
Tabs
  • Horizontal resizing
  • Resizable panel options
  • Horizontal resizing with controlled widths
  • Vertical resizing
  • Resizable container callbacks
  • Collapsible resizable panels
  • Responsive layout
  • Collapsible panel options
  • Collapsible panels with external control
    • Custom collapse button
  • Resizable button indicator
  • Custom resize logic
  • Props
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with ❤ by Elastic