mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
82 lines
4.0 KiB
Plaintext
82 lines
4.0 KiB
Plaintext
---
|
|
title: Autosize
|
|
summary: The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type.
|
|
description: Make textareas grow automatically as users type with autosize, so longer text stays visible without manual resizing.
|
|
related: [/ui/forms/elements]
|
|
---
|
|
import Example from '@components/Example.astro';
|
|
import CodeDocs from '@components/CodeDocs.astro';
|
|
|
|
## Overview
|
|
|
|
A textarea keeps its height no matter how much text it holds, so long answers end up in a small scrolling box. Autosize grows the field as the user types and shrinks it again when text is removed.
|
|
|
|
<Example column vertical>
|
|
<label class="form-label">Autosize example</label> <textarea class="form-control" data-bs-toggle="autosize" placeholder="Type something…"></textarea>
|
|
</Example>
|
|
|
|
## Installation
|
|
|
|
Autosize is part of `tabler.js` and has no dependency, so there is nothing extra to install or load. It only sets the height of the field, so it needs no CSS of its own.
|
|
|
|
## Usage
|
|
|
|
Add `data-bs-toggle="autosize"` to a textarea. Tabler picks it up on page load, so there is nothing else to call.
|
|
|
|
<Example column vertical>
|
|
<label class="form-label">Message</label> <textarea class="form-control" data-bs-toggle="autosize" rows="1" placeholder="Write a message…"></textarea>
|
|
</Example>
|
|
|
|
Set `rows` to choose the starting height. With `rows="1"` the field starts as a single line and grows from there. Set a `max-height` to cap the growth; past it the field scrolls again.
|
|
|
|
<Example column vertical>
|
|
<label class="form-label">Notes, at most four lines</label> <textarea class="form-control" data-bs-toggle="autosize" rows="2" style="max-height: 6.5rem" placeholder="Keep typing to see the field stop growing…"></textarea>
|
|
</Example>
|
|
|
|
## JavaScript
|
|
|
|
Tabler ships an `Autosize` component that works like the Bootstrap components: it is created once per element and stored on it. On page load Tabler creates one for every element with `data-bs-toggle="autosize"`. It sets the height from the content on every `input` event and again when the field changes width. This is the code that runs:
|
|
|
|
<CodeDocs name="autosize-init" file="core/js/src/autosize.ts" />
|
|
|
|
Create the component yourself when you add a textarea later, for example inside a modal or a row added by JavaScript:
|
|
|
|
```js
|
|
const autosize = new tabler.Autosize(document.getElementById('message'));
|
|
```
|
|
|
|
`tabler.Autosize.getOrCreateInstance(element)` returns the existing component or creates a new one, so it is safe to call more than once for the same field.
|
|
|
|
Autosize measures the field, so a hidden textarea is skipped. Call `update()` once it becomes visible, or after you set its value from code:
|
|
|
|
```js
|
|
tabler.Autosize.getOrCreateInstance(document.getElementById('message')).update();
|
|
```
|
|
|
|
Call `dispose()` to stop it and put the inline style back the way it was:
|
|
|
|
```js
|
|
tabler.Autosize.getInstance(document.getElementById('message'))?.dispose();
|
|
```
|
|
|
|
| Method | Description |
|
|
| --- | --- |
|
|
| `update()` | Recalculates the height, for example after the textarea becomes visible or its value changes from code. |
|
|
| `dispose()` | Stops listening, restores the inline style and removes the component from the element. |
|
|
| `getInstance(element)` | Static. Returns the component for the element, or `null`. |
|
|
| `getOrCreateInstance(element)` | Static. Returns the component for the element and creates it when needed. |
|
|
|
|
Every change of height fires `resized.bs.autosize` on the textarea, for example to scroll a chat window to the bottom:
|
|
|
|
```js
|
|
document.getElementById('message').addEventListener('resized.bs.autosize', () => {
|
|
thread.scrollTop = thread.scrollHeight;
|
|
});
|
|
```
|
|
|
|
## Accessibility
|
|
|
|
- Keep the `label` for the field. A growing textarea is still a normal form control and needs its name.
|
|
- Let the field grow freely when you can. A `max-height` brings back a scrolling box, so keep it generous, for example the height of the visible chat window.
|
|
- Autosize hides the resize handle, because the field grows on its own. With a `max-height` the field scrolls past the cap, so long text stays reachable.
|