eui documentation
  1. Directives
  2. AutoResizeDirective

File

packages/components/eui-textarea/auto-resize.directive.ts

Description

A directive that automatically adjusts the height of a textarea based on its content.

The AutoResizeDirective automatically adjusts the height of a textarea element as the user types, ensuring that all content is visible without requiring manual resizing or scrolling. It supports minimum and maximum row constraints and can be enabled/disabled dynamically.

Example :
<textarea autoResize [minRows]="2" [maxRows]="5"></textarea>

Implements

OnInit AfterViewInit OnDestroy

Metadata

Selector textarea[autoResize]

Index

Methods
Inputs
HostListeners

Constructor

constructor()

Inputs

autoResize
Type : boolean, BooleanInput
Default value : true, { transform: booleanAttribute }

Controls whether the auto-resize functionality is enabled. When true, the textarea will automatically adjust its height based on content. When false, the textarea will behave normally.
maxRows
Type : number, NumberInput
Default value : 0, { transform: numberAttribute }

Sets the maximum number of rows for the textarea. When set to a value greater than 0, the textarea will not grow beyond this number of rows and will show scrollbars if necessary. When set to 0, there is no maximum limit.
minRows
Type : number, NumberInput
Default value : 1, { transform: numberAttribute }

Sets the minimum number of rows for the textarea. This value determines the initial height of the textarea.

HostListeners

input

Event handler for input events on the textarea. Triggers the resize calculation when the content changes.

Methods

onInput
onInput()
Decorators :
@HostListener('input')

Event handler for input events on the textarea. Triggers the resize calculation when the content changes.

Returns : void
Public resize
resize()

Calculates and sets the appropriate height for the textarea based on its content. This method creates a temporary clone of the textarea to measure the required height, taking into account minRows and maxRows constraints.

The calculation process:

  1. Creates a hidden clone of the textarea
  2. Sets the clone's width to match the original
  3. Measures the required height based on content
  4. Applies maxRows constraint if specified
  5. Updates the original textarea's height
Returns : void

results matching ""

    No results matching ""