---
title: "Autoresize plugin"
description: "Automatically resize TinyMCE to fit content."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/autoresize/"
md_url: "https://www.tiny.cloud/docs/tinymce/6/autoresize/index.md"
version: "6"
last_updated: "2024-02-07T00:20:10Z"
tokens: 1117
---
Important This page documents TinyMCE 6. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/autoresize/).
# Autoresize plugin

This plugin automatically resizes the editor to the content inside it. It is typically used to prevent the editor from expanding infinitely as a user types into the editable area. For example, by giving the `max_height` option a value the editor will stop resizing when the set value is reached.

## Basic setup

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'autoresize'
});
```

## Options

These settings affect the execution of the Autoresize plugin, including changes to the minimum width, height, bottom margin, and default initialization state.

### `autoresize_bottom_margin`

This option allows you to specify the size of the `padding` at the bottom of the editor’s `body` set on initialization.

**Type:** `Number`

#### Example: using `autoresize_bottom_margin`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'autoresize',
  autoresize_bottom_margin: 50
});
```
As of version 6.4.1, TinyMCE checks for the TinyMCE resize function entering a loop.

If the function is detected as doing so, the document’s `margin-bottom` value is set to 0, instead of whatever value is assigned to `autoresize_bottom_margin`.

This prevents an [infinite resizing bug from presenting](../6.4.1-release-notes/#infinite-resize).

To prevent the resize function from even entering this loop, `autoresize_bottom_margin` must be set to a value less than any `margin-bottom` value set for the document.

Alternatively, if `margin-bottom` is set by a CSS declaration, set `autoresize_bottom_margin` to `0`.

#### Example: setting `autoresize_bottom_margin` to zero because `margin-bottom` is set elsewhere

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'autoresize',
  autoresize_bottom_margin: 0
});
```

### `autoresize_overflow_padding`

This option allows you to specify the size of the `padding` at the sides of the editor’s `body` set on initialization.

**Type:** `Number`

#### Example: `autoresize_overflow_padding`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'autoresize',
  autoresize_overflow_padding: 50
});
```

### `max_height`

The `max_height` option has two kinds of behaviors depending on the state of the [`autoresize`](#) plugin:

- `autoresize` OFF (Default): Without the `autoresize` plugin, this option sets the maximum height that a user can stretch the entire TinyMCE interface (by grabbing the draggable area in the bottom right of the editor interface).
- `autoresize` ON: With the `autoresize` plugin, this option sets the maximum height the editor can automatically expand to.

**Type:** `Number`

#### Example: using `max_height`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'autoresize',
  max_height: 500
});
```

> **Note:** If the [`resize`](../editor-size-options/#resize) option is set to `false` the resize handle will be disabled and a user will not be able to resize the editor (by manual dragging). Note that `resize` defaults to `false` when the `autoresize` plugin is enabled.

### `min_height`

The **min_height** option has two kinds of behaviors depending on the state of the [`autoresize`](#) plugin:

- `autoresize` OFF (Default): Without the `autoresize` plugin, this option sets the minimum height that a user can shrink the entire TinyMCE interface (by grabbing the draggable area in the bottom right of the editor interface).
- `autoresize` ON: With the `autoresize` plugin, this option sets the minimum height the editor can automatically shrink to.

**Type:** `Number`

**Default value:** `100`

#### Example: using `min_height`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'autoresize',
  min_height: 100
});
```

> **Note:** If the [`resize`](../editor-size-options/#resize) option is set to `false` the resize handle will be disabled and a user will not be able to resize the editor (by manual dragging). Note that `resize` defaults to `false` when the `autoresize` plugin is enabled.

## Commands

The Autoresize plugin provides the following TinyMCE command.

| Command | Description |
| --- | --- |
| mceAutoResize | Auto resizes the editor to the contents. |

Example
```js
tinymce.activeEditor.execCommand('mceAutoResize');
```