---
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/7/autoresize/index.md"
version: "7"
last_updated: "2024-02-07T00:06:47Z"
tokens: 1010
---
Important This page documents TinyMCE 7. 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.3, `autoresize_bottom_margin` must be set to a value below the `margin-bottom` property of any content CSS, else it will be ignored and set 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');
```