mirror of
https://github.com/tabler/tabler.git
synced 2026-10-20 23:04:20 +04:00
28 lines
1.1 KiB
Plaintext
28 lines
1.1 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.
|
|
docs-libs: autosize
|
|
description: Auto-adjusting textarea for better usability.
|
|
layout: '@layouts/DocsMdxLayout.astro'
|
|
---
|
|
import Example from '@components/Example.astro';
|
|
import CodeDocs from '@components/CodeDocs.astro';
|
|
|
|
To be able to use the autosize in your application you will need to install the autosize dependency with `npm install autosize`.
|
|
|
|
## Default markup
|
|
|
|
Add the autosize element to your input to make it automatically adjust to the length of a text as a user types it.
|
|
|
|
To create autosize textarea, add the `data-bs-toggle="autosize"` attribute to the textarea element:
|
|
|
|
<Example column vertical>
|
|
<label class="form-label">Autosize example</label> <textarea class="form-control" data-bs-toggle="autosize" placeholder="Type something…"></textarea>
|
|
</Example>
|
|
|
|
## JavaScript
|
|
|
|
Tabler automatically initializes all elements with `data-bs-toggle="autosize"` on page load. This is the code that runs:
|
|
|
|
<CodeDocs name="autosize-init" file="core/js/src/autosize.ts" />
|