Problem/Motivation

When using CKEditor 5 inside Drupal’s Off-Canvas dialog
(specifically within the Layout Builder workflow),
the table grid selector UI fails to position correctly.
Instead of stacking or floating as intended, the grid selector
visually overlaps the existing table toolbar, making table dimension
selection difficult or unusable.

Investigation indicates that this is not a simple z-index or rendering
issue. The behavior is consistent with a
coordinate calculation failure caused by a non-standard
containing block. The Off-Canvas container’s use of
position: fixed and constrained layout behavior interferes
with CKEditor 5’s balloon positioning engine.

Steps to reproduce

  1. Install Drupal 11 with the Layout Builder module enabled.
  2. Navigate to the Layout tab of a content item.
  3. Click Add block and select Create custom block
    to open the Off-Canvas sidebar.
  4. In the CKEditor 5 instance within the sidebar, click the
    Insert table button.
  5. Observe that the grid selector overlaps the table toolbar
    instead of aligning correctly.

Proposed resolution

Introduce a targeted CSS adjustment in the
Claro admin theme (or core Off-Canvas styles) to ensure that
.ck-balloon-panel calculates its position correctly when nested
inside .ui-dialog-off-canvas.

The goal is to ensure that CKEditor’s positioning logic accounts for
the fixed Off-Canvas viewport rather than inheriting an invalid
coordinate context.

Remaining tasks

  • Draft a CSS patch for the Claro admin theme addressing Off-Canvas balloon positioning.
  • Verify that the fix does not regress balloon positioning in full-page editors.
CommentFileSizeAuthor
#13 layout-builder-off-canvas-ckeditor-table-fix-console-proof.png211.48 KBsudhan_work_contribution
reproduction_layout_builder.png39.87 KBsudhan_work_contribution
devtools_coordinate_failure.png200.27 KBsudhan_work_contribution
current_ui.png4.37 KBanitavernes
correct_ui.png65.41 KBanitavernes

Issue fork drupal-3563459

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

    About issue forks

    Comments

    anitavernes created an issue. See original summary.

    cilefen’s picture

    cilefen commented
    Issue tags: +Needs steps to reproduce

    I am unable to reproduce this bug as currently written. Could you please provide some additional details regarding the reproduction steps?

    sadman’s picture

    sadman commented

    +1 — I am also experiencing this issue and wanted to add some details that may help narrow it down. I hope this does not muddy the waters; I do not currently have a reliable way to reproduce it on a clean Drupal install.

    Environment

    • - Drupal core: 10.5.6
    • - CKEditor 5: 10.5.6
    • - Multisite installation (~30 sites)

    This began occurring immediately after migrating from CKEditor 4 to CKEditor 5. CKEditor 4 has been fully uninstalled.

    Where the problem does not occur:

    • - Text fields of type Text (formatted, long, with summary) when used directly on content types.


    Where the problem does occur:

    • - On some (but not all) of the multisites when editing Layout Builder inline blocks that use the same field type (Text (formatted, long, with summary)).
    • - The behavior is consistent per-site:
      • - Sites where the editor works continue to work reliably.
      • - Sites where the issue appears always exhibit the issue.


    There are no errors in the browser console, and the behavior does not change after Drupal cache clears, Varnish clears, or other standard cache resets.

    sadman’s picture

    sadman commented

    Quick follow-up to my previous comment:

    I was able to identify the root cause on my multisite installation. We are using the contrib-supported Seven theme as the admin theme, and layout_builder_modal was configured to use the admin theme for the modal. When I switch the modal to use our front-end theme only, the table/grid issue disappears.

    So in my case, the behavior was theme-related rather than a CKEditor 5 issue. Hopefully this helps others who might run into the same scenario.

    cilefen’s picture

    cilefen commented

    This appears to be related to #3563459: CKEditor 5 table grid selector displays incorrectly.

    cilefen’s picture

    cilefen commented

    I meant #3564146: CKEditor overrides admin theme.

    quietone’s picture

    quietone commented
    Version: 11.3.x-dev » 11.x-dev

    Hi, in Drupal core changes are made on on 11.x (our main development branch) first, and are then back ported as needed according to the Core change policies. Thanks.

    cilefen’s picture

    cilefen commented
    Issue tags: +Possible duplicate

    Version: 11.x-dev » main

    Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

    Read more in the announcement.

    sudhan_work_contribution’s picture

    sudhan_work_contribution commented

    Hi, I have updated the Issue Summary with a detailed root cause analysis and attached high-resolution DevTools evidence proving the coordinate calculation failure in the Layout Builder sidebar.

    sudhan_work_contribution’s picture

    sudhan_work_contribution commented
    Issue summary: View changes
    Issue tags: -Needs steps to reproduce, -Possible duplicate +The problem is understood. Evidence exists. Next step is maintainer direction.
    StatusFileSize
    new layout-builder-off-canvas-ckeditor-table-fix-console-proof.png211.48 KB

    Status update: root cause isolated and fix direction validated

    I have completed a comprehensive forensic investigation and local validation for this issue.
    A concise summary is provided below.

    Root cause

    This is a coordinate calculation failure that occurs specifically when CKEditor 5 is rendered
    inside the Layout Builder Off-Canvas dialog. The sidebar’s
    position: fixed creates a non-standard containing block that interferes with
    CKEditor’s balloon positioning engine.

    Reproduction

    • Consistently reproducible on a clean Drupal 11.x install when editing content via
      Layout Builder’s Off-Canvas UI
    • Does not reproduce in standard full-page node editing

    Forensic evidence

    DevTools inspection shows the internal
    .ck-fake-selection-container being calculated at
    left: -9999px, confirming a positioning failure rather than a
    z-index or overflow issue.

    Validated proof-of-concept

    I built and tested a local CSS + JavaScript workaround that:

    • Stabilizes the balloon panel positioning inside the Off-Canvas context
    • Prevents the table grid and toolbar overlap
    • Resolves the nested table insertion behavior by programmatically moving the cursor
      outside the table widget after insertion

    Current status

    The issue is ready for maintainer guidance on the preferred permanent fix approach
    (e.g. a Drupal-side Off-Canvas adjustment vs a CKEditor integration hook).
    I’m currently assigned to the issue and happy to help draft or validate a core patch
    once direction is confirmed.

    avpaderno’s picture

    avpaderno
    he/him
    Primary language Italian
    Location Brescia, 🇮🇹 🇪🇺
    commented
    Assigned: sudhan_work_contribution » Unassigned
    Issue tags: -The problem is understood. Evidence exists. Next step is maintainer direction.
    sudhan_work_contribution’s picture

    sudhan_work_contribution commented

    Thanks for the review. I’m continuing to explore a core-appropriate fix direction and am happy to work on a patch once maintainer guidance is confirmed.

    avpaderno’s picture

    avpaderno
    he/him
    Primary language Italian
    Location Brescia, 🇮🇹 🇪🇺
    commented
    Title: CKEditor 5 Table Grid Selector Displays Incorrectly » CKEditor 5 table grid selector displays incorrectly