Mobile Toolbar Mode

Mobile

Mobile Toolbar Mode

An opt-in stylesheet that reshapes the editor for phones and touch-first devices. No changes to editor markup — purely CSS-driven, scoped behind a narrow-viewport media query so desktop layouts stay unchanged.

Open live demo

Enable it

Add the rte-mobile class to any editor container and include rte_mobile.css:

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css" />
<link rel="stylesheet" href="/richtexteditor/rte_mobile.css" />

<div id="editor" class="rte-mobile"></div>

ASP.NET Core Tag Helper users just set enable-mobile-toolbar="true" — it emits the link and adds the class for you.

<richtextbox asp-for="Body" toolbar="full"
             enable-mobile-toolbar="true" />

What changes

44×44 tap targets — meets WCAG 2.5.5 Target Size.
Horizontally scrolling toolbar — no wrap, no lost vertical space, with an edge-fade gradient for affordance.
Sticky toolbar — stays pinned above the virtual keyboard.
Bottom-sheet dropdowns — font, color, insert menus mount as slide-up sheets instead of clipping off-screen.
Full-width dialogs — link, image, Ask AI: 8px safe-area margins on the sides.
Review drawer from bottom — comments / track-changes drawer slides up, not from the right.
Floating paragraph toolbar disabled — it fought the iOS keyboard.
16px content font — suppresses iOS auto-zoom when tapping into the editor.

Everything is scoped inside:

@media (max-width: 768px), (pointer: coarse) {
    .rte-mobile .rte-toolbar { /* ... */ }
    /* ... */
}

So leaving the class on in production code is harmless — a desktop viewport doesn’t pick up any of the mobile-specific rules.

Site-wide default

For admin apps where every editor is phone-first, apply the class to <body> once:

<body class="rte-mobile">
    ...
</body>

This cascades to every editor on the page; no per-instance attribute needed.

Documentation