File

packages/eui/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 :
```html
<textarea autoResize [minRows]="2" [maxRows]="5"></textarea>
Example :

Implements

OnInit OnChanges AfterViewInit OnDestroy

Metadata

Index

Methods
Inputs
HostListeners
Accessors

Inputs

autoResize
Type : boolean
Default value : true
maxRows
Type : number
Default value : 0
minRows
Type : number | string

HostListeners

input
Arguments : '$event.target'

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

Methods

onInput
onInput()
Decorators :
@HostListener('input', ['$event.target'])

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

Accessors

minRows
setminRows(minRows: number | string)

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

Parameters :
Name Type Optional Description
minRows number | string No
  • The minimum number of rows to display
Returns : void

results matching ""

    No results matching ""