From 6f9f09e59bdef62e528f634bffdca23ada619058 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Sun, 1 Mar 2026 21:24:46 +1000 Subject: [PATCH] Docs: DOC-618 - Document inline mode CSS overflow pitfalls and recommended approaches Made-with: Cursor --- modules/ROOT/pages/inline-css.adoc | 2 +- modules/ROOT/pages/use-tinymce-inline.adoc | 9 +++++++++ modules/ROOT/partials/configuration/body_class.adoc | 2 ++ modules/ROOT/partials/configuration/content_css.adoc | 2 +- modules/ROOT/partials/configuration/content_style.adoc | 2 ++ 5 files changed, 15 insertions(+), 2 deletions(-) diff --git a/modules/ROOT/pages/inline-css.adoc b/modules/ROOT/pages/inline-css.adoc index 7d64a07960..dec2562127 100644 --- a/modules/ROOT/pages/inline-css.adoc +++ b/modules/ROOT/pages/inline-css.adoc @@ -120,7 +120,7 @@ CSS can be specified in inline mode in the following ways: + Setting the xref:add-css-options.adoc#content_css[`content_css`] option automatically creates the `` tag and puts it in the {productname} document’s ``. + -NOTE: This is not recommended. +NOTE: This is not recommended. Content CSS injected via `+content_css+` applies globally in inline mode and can overflow onto the rest of the page. See xref:use-tinymce-inline.adoc#content-css-overflow-in-inline-mode[Content CSS overflow in inline mode] for details. . A CSS stylesheet specified in the `` of the document with a `` tag. + diff --git a/modules/ROOT/pages/use-tinymce-inline.adoc b/modules/ROOT/pages/use-tinymce-inline.adoc index c3b580a7b5..ac45bb32e1 100644 --- a/modules/ROOT/pages/use-tinymce-inline.adoc +++ b/modules/ROOT/pages/use-tinymce-inline.adoc @@ -49,3 +49,12 @@ The following demonstration is using four {productname} editors in inline mode, liveDemo::inline[] For information on inline mode and the `+inline+` setting, see: xref:inline-editor-options.adoc#inline[User interface options - inline]. + +== Content CSS overflow in inline mode + +Inline mode is not sandboxed in an iframe. Content CSS loaded via `+content_css+` or `+content_style+` is injected into the page `+head+` and applies globally. This can cause content styles to "break out" or overflow from the editable area onto the rest of the page, affecting layout and appearance outside the editor. + +To avoid this: + +. *Preferred:* Use the `+body_class+` option and scope your content styles to that class. Add the stylesheet or `+