---
title: "Options for customizing the editor’s UI mode"
description: "Information on options for customizing TinyMCE's UI mode"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/ui-mode-configuration-options/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/ui-mode-configuration-options/index.md"
version: "latest"
last_updated: "2025-05-15T06:38:59Z"
tokens: 474
---
# Options for customizing the editor’s UI mode

## Editor in scrollable container

### `ui_mode`

This option configures the location of all the UI elements that should scroll with the editor, such as popups, menus and inline dialogs.

By default, these UI elements are rendered in a container that is attached to the document body, meaning they are not connected to any scrollable containers the editor might be in.

When the editor is rendered in a scrollable container, scrolling the editor’s container will cause these UI elements to be detached from the anchor.

If `toolbar_sticky` is set to true, the sticky toolbar and the menus have no effect on docking when scrolling the editor’s container; they are only triggered when the page is scrolled.

However, setting this option to `'split'` enables support for editors in scrollable containers and adjusts the behaviour as follows:

- Popups, menus and inline dialogs are rendered in a separate container and inserted as a sibling to the editor. These UI elements move together as you scroll the editor’s container.
- If `toolbar_sticky` is set to true, the UI element can be docked on both page and container scroll. This means the UI element will stay in the same place relative to the container, regardless of how much you scroll the page or the container itself.

**Type:** `String`

**Default value:** `'combined'`

**Possible values:** `'combined'`, `'split'`

#### Example: using `ui_mode`

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

#### Interactive example

**Example**

```js
const settings = {
  plugins: 'lists help',
  toolbar: 'undo redo | blocks | bold italic | bullist numlist',
  ui_mode: 'split',
  min_height: 500
};

tinymce.init({
  ...settings,
  selector: 'textarea#iframe'
});

tinymce.init({
  ...settings,
  inline: true,
  selector: '.tinymce-heading',
  inline: true,
  toolbar: 'undo redo | bold italic underline'
});

tinymce.init({
  ...settings,
  selector: '.tinymce-body',
  inline: true
});
```