Autosize

The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type.

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.

<label class="form-label">Autosize example</label>
<textarea class="form-control" data-bs-toggle="autosize" placeholder="Type something…"></textarea>

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.

<label class="form-label">Message</label>
<textarea class="form-control" data-bs-toggle="autosize" rows="1" placeholder="Write a message…"></textarea>

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.

<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>

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:

initAll(SELECTOR_DATA_TOGGLE, Autosize)

Create the component yourself when you add a textarea later, for example inside a modal or a row added by JavaScript:

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:

tabler.Autosize.getOrCreateInstance(document.getElementById('message')).update();

Call dispose() to stop it and put the inline style back the way it was:

tabler.Autosize.getInstance(document.getElementById('message'))?.dispose();

Every change of height fires resized.bs.autosize on the textarea, for example to scroll a chat window to the bottom:

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.

Related