### File

`packages/components/directives/eui-resizable/eui-resizable.directive.ts`

### Description

Enables interactive resizing of a container element by dragging a handle. Applies width constraints dynamically and supports left or right-side handle placement. Intended for use in layouts requiring user-adjustable panel widths, such as sidebars or split views.

### Implements

`OnInit` `OnDestroy`

### Metadata

Selector | `[euiResizable]`

### Index

###### Properties

- styleFlexBasisWidth
- styleMaxWidth
- styleMinWidth
- styleWidth

###### Inputs

- euiResizableMinWidth
- euiResizablePosition
- euiResizableSideContainer

###### HostBindings

- style.flex-basis.px
- style.max-width.px
- style.min-width.px
- style.width.px

### Inputs

euiResizableMinWidth
Default value : `0, { transform: pixelTransform }`
Minimum width constraint for the resizable container in pixels. Prevents the container from being resized below this value. Accepts string or number values, automatically converted to non-negative pixels. Defaults to 0.

euiResizablePosition
Type : `EuiResizablePosition`
Default value : `'right'`
Determines the placement of the resizable handle and the direction of resizing behavior. 'left' positions the handle on the left edge; 'right' positions it on the right edge. Defaults to 'right'.

euiResizableSideContainer
Default value : `false, { transform: booleanAttribute }`
Determines if the resizable directive is affecting eui-app-side-container

### HostBindings

style.flex-basis.px
Type : `number`

style.max-width.px
Type : `number`

style.min-width.px
Type : `number`

style.width.px
Type : `number`

### Properties

styleFlexBasisWidth
Type : `number`
Decorators : `@HostBinding('style.flex-basis.px')`

styleMaxWidth
Type : `number`
Decorators : `@HostBinding('style.max-width.px')`

styleMinWidth
Type : `number`
Decorators : `@HostBinding('style.min-width.px')`

styleWidth
Type : `number`
Decorators : `@HostBinding('style.width.px')`

# results matching ""

# No results matching ""