CKEditor 5 toolbar items of multi-value field (typically Paragraphs) overflowing on narrow viewports and overlapping with node form's sidebar on wide viewports

After looking into the code of ckeditor, I don't think it could be easily fixed from upstream as they might need to change the way of how to calculate if the toolbar items are overflowing or not.

Currently, Ckeditor 5 relies on the `resize` event to determine if the toolbar items should be wrapped inside a popup. However, the event doesn't seem to be triggered for the toolbar element when it's embedded in a table or fieldset as the flex styling isn't being resized correctly when a flex element is wrapped inside in the two said elements above and this seems to be the default behavior of current browsers (tested on Chrome/Safari).

See this codepen link for example.

I tried to see if we could replace the table used in the multivalue field to use div instead but looks like Drupal core is using tabledrag to handle the ordering and I assume we don't (can't) switch it to use div?

Excellent research, @sker101!

Could you please report this at https://github.com/ckeditor/ckeditor5? 🙏 😊

Tangentially related, but different: 🐛 CKEditor 5 toolbar overflow can become unusable in Off canvas Needs work .

@Wim Leers
There is a similar issue on ckeditor5's repo but haven't been responded by anyone for about a year.

Perfect! I missed that! 😅 Relayed your suggestion there: https://github.com/ckeditor/ckeditor5/issues/11334#issuecomment-1405201841 — and pinged the CKEditor 5 project lead that issue 👍

I just realized that this bug had been previously reported at 🐛 Toolbar is not responsive Closed: duplicate . There I wrote:

IIRC this is related to the shouldNotGroupWhenFull setting. If you remove all toolbar separators, then it will actually behave responsively. Could you give that a try?

and @DieterHolvoet responded:

I removed all separators and I set a breakpoint in CKEditor5::getJSSettings to make sure shouldNotGroupWhenFull is FALSE, and it is. If I add a text field directly to a node the grouping now works, if I add it to a paragraph it doesn't work and it still overflows the page. Does that make this a Paragraphs issue?

It looks like this may be a problem specific to Paragraphs' CSS … because both the bug reported here and there is only occurring in the context of Paragraphs.

Can you please investigate if you can reproduce this without Paragraphs? 🙏

Wim Leers → credited DieterHolvoet → .

Hi, @Wim Leers

I believe that this issue could happen whenever the ckeditor is embedded inside a table element, for example, a text field that supports multiple values.

See the reproducible steps that I have on the main post.

1. Do a Drupal clean install. (I use https://simplytest.me/)
2. Navigate to a content type and create a text field that uses ckeditor 5 and allow unlimited value.
3. Move the field to the top on the form display of the content type.
4. Add more items to the ckeditor.
5. Go to the create page of the content type and resize the browser down to around 1000px (depends on the number of the toolbar items)
6. See the overlapping issue.

Also, I noticed that

@sker101 Thank you!

Also discussed this with @Reinmar from CKEditor 5, as well as @lauriii!

This bug has not been reported by other CKEditor 5 users; it looks like it's specific to a very particular container markup+CSS situation. @lauriii, @Reinmar and I agreed that it'd be best to solve this problem on the Drupal side, not upstream.

Wim Leers → credited lauriii → .

Wim Leers → credited Reinmar → .

Got the same issue. Claro admin theme + Paragraphs.

Not a long term fix but the below css change fixes the issue in Gin:

.paragraphs-subform {
  width: calc(100% - 18px) !important;
}

I fixed this by adding this to the admin stylesheet:

.ck.ck-toolbar.ck-toolbar_grouping > .ck-toolbar__items {
    flex-wrap: wrap;
}

Perhaps this is useful for anyone.

The approach in #19 works for me. Except I added the css to a custom module I was already using as a new library. Then used MYMODULE_preprocess_page to attach the CSS.

That said, this overrides the hiding of the controls behind the triple-dot menu, which I think is cleaner. Let me think on this issue.

Just chiming in, that we observed this issue in a form that is using the ever-popular inline_entity_form module to manage related entities to a node. One can see that inline_entity_form uses tables. In light of others working on this issue with CKE5, we worked around the issue by editing the toolbar in the text filter configuration to add line breaks into the toolbar. This eliminates the nice vertical-dots-see-more feature of the cke5 toolbar and does not look as nice, but it stops the toolbar from pushing out the editor's width.

The approach in #19 worked for me.

Here is the #19 approach via claro in case someone else need it,
I'm not sure where to put it, so I just pick one of the css and apply patch on it.

Patch #25, made directly changes to css file also using ! important; I have made changes into pcss fle and updated the patch and attached the interdiff

Patch didn't seem to solve the issue. Think we need to figure out how to trigger

Patch #25 works for me.
Unfortunately patch #27 does not, only works with the "!important" added to the style.

Patch #25 is working for us on core 10.1.4

Added !important to flex wrap. attached interdiff for same.

Think my comment in #28 could still be relevant.

Wondering if an upstream issue where the three dots aren’t appearing.

@smustgrave
It's because the resize event not being triggered correctly, I had an explanation and example in comment #5 🐛 CKEditor 5 toolbar items of multi-value field (typically Paragraphs) overflowing on narrow viewports and overlapping with node form's sidebar on wide viewports Needs work

Thanks @sker101 for pointing out!

Think this needs to be fixed upstreamed still. So I'm repostponing this per #9

#31 makes it wrap like it did in ckeditor4.

So based on the IS screenshots we would have one text field behaving correctly and others behaving differently which I don't think is desired.

Hopefully upstream fix will address 🐛 CKEditor 5 toolbar overflow can become unusable in Off canvas Needs work as well.

Per #16, we should fix this on our end. Unless we've found a upstream blocker that makes it impossible to fix on our end? 🤔

The sticky toolbar seems to fix the editor size issue when scrolling, and it happens in a fresh install (without paragraphs).

1. Launch a site (simplytest.me)
2. In the Basic HTML config page, add many items to the editor's toolbar (multivalued or not)
3. Save it
4. Create a new Article
5. The body field will cause the right sidebar to extend beyond the viewport.
6. Focus the editor, and scroll
7. The editor will change its size.

I'm attaching a video.

Patch from #31 works when aggregation of css is disabled on the performance settings page. But not when enabled.

Wim Leers → credited scott_euser → .

Closed 🐛 Auto-expand CKEditor 5 expands horizontally as well causing issues in the admin UI Closed: duplicate as a duplicate. Crediting @scott_euser.

Hello,

Any updates on the issue with the three dots not showing when there are too many items in the embedded editor within a paragraph?

Patch #31 resolves the overlap with the sidebar—thanks @Gauravvvv.

However, I still face the issue of items going to the next line even with 'shouldNotGroupWhenFull' set to False. I've found comments on a potential solution on the upstream side: https://github.com/ckeditor/ckeditor5/issues/11334, but it seems to be ongoing.

Also, there are mentions of addressing the problem on the paragraph side, but I couldn't locate a specific link to the issue.

Any updates would be appreciated.

@sker101, @Wim Leers
Thanks.

The CKEditor 5 upstream issue → looks tricky and I'm unsure how long it might take to get a fix there.

However, this is something that can be addressed on Drupal's end for at least one very common use case: when used inside tabledrag. We know enough about the structure it will be in that we can use some custom JS to set the CKEditor-containing table cell to a max-width, which will result in the editor properly implementing any needed ... and keeping the editor width within the table it belongs to.

I added a solution to the MR. It would benefit from tests, but it also seems difficult to test but maybe there's something elegant I'm overlooking.

Hiding patches for clarity

Show the fix is working but seems that a different solution was proposed could that be added to the issue summary.

As far as a test case maybe could test that at browser size 1000 the ckeditor box = xyz ? Could that cause randoms to appear though?

Uploading patch version of the merge request for composer patching for the meantime.

Adding the same patch, only changing the isInsideTabledrag selector to make it work with Seven administration theme.

We detected this issue with our project automated tests (Playwright, sadly won't help here) as soon as we updated to ckeditor5 when running for mobile devices (we use Claro).

With the patch at #49 _some_ of our tests are back to green. I still need to figure out what's the case where this is still happening.

I'm surprised that per #50, Seven uses different classes for the draggable tables. Assuming Seven is still supported, what could be a desirable solution here? Is there any other selector we can use that could work for both while this is fixed upstream?

#49 & #50 both introduce a typo in:

window.ddEventListener('resize', editorFitInTable);

Note the 'a' missing in 'addEventListener' method.

Thank you for noticing, I fixed the typo in the MR and re-upload the two patches for composer patching.

This the Safari browser and CKeditor5 :

Fields are getting compressed.

Double check which patch you applied for you admin theme!

Hi,

The issue is Not because of the patch, it is happening when we are placing the filed inside the field group with Accordion, tab and detailed configuration. Working on this issue.

Thanks!

I fixed the issue mention in comment #54 and re-upload the Patches.

I don't really understand what is going on now.
The work is ongoing in the merge request and not patches! I clearly stated that the patches in #53 are meant to be used for composer patching. Also, changes missing from your patch which are in the present merge request. Nevertheless, issues are not addressed from #47.
Removing patches for clarity.

fixed as in #22 by editing the toolbar in the text filter configuration to add line breaks into the toolbar.

Hi,
Based on the comment #59 I've created a commit for the changes.
Kindly review and let me knows if anything need to be done further.

Thanks!

MR appears to have failures.

Merging the branch with the upstream fixed MR failures.
Please review and test.

Re-verified this bug following the steps mentioned. Actually was even able to trigger it when switching text formatters between basic and full.
Applying the MR did resolve the problem.

Know it wasn't in scope but also tested 🐛 CKEditor 5 toolbar overflow can become unusable in Off canvas Needs work while I was at it and unfortunately that issue still remains.

some more things to fix

Here is a patch for the latest changes and an additional one with changes from #53 to support seven theme. Not sure if this theme be supported and therefor to be addressed in the MR.

I am currently working on resolving the issues and suggestions that have been pointed out after review.

Please review and test.

Appears feedback from @nod_ has been addressed

couple more comments

I think we'll need to improve the performance here. What happens when there are 20 editors in the same tabledrag? we'll compute the width 20 times on resize instead of once for all the editors. Need to try with 20 ish editors in a single tabledrag and see what perf is like.

MR was updated. Also, I did some optimization: the calculation of max-width now will be executed only once for the table. Please test and review.

Nice update!

Still working for me.

Marking as NW because the issue still exist even with patches applied on Drupal 10 (tested with 10.2.2 with a CKE5 text editor in a paragraph field + the Gin theme). Not sure if we want to backport the fixes to D10 though 🤷

Feel free to disregard if we only want to fix this on D11.

@matthieuscarset we are using the solution in a paragraph field with Seven theme and Claro. I think the problem will be theme related, so the selector in the JS might not apply for Gin theme.

@matthieuscarset I believe the problem is theme-related. I investigated the issue with the Gin theme, so the issue is in empty TD that has 100% width in CSS rules that came in the end with negative max-width (see img - I have applied the proposed CSS, for testing and it works). As for me, the easiest solution will be just to add/update or alter the theme CSS to something like:

[data-drupal-calibrate-width] td:empty {
  width: auto !important;
}

Note: also figured out the issue with the incorrect position of the drag-cell icon and here is the CSS fix:

[data-drupal-calibrate-width] td.tabledrag-cell--only-drag {
  display: table-cell;
}

But I think it is not related to this issue and is related to the theme CSS. Any thoughts on this?

After 10.2.5 the patch stoped working. I quickly fixed it.

After applying the last patch #79 the CKEditor appearance is not right.

I upgraded to Drupal 10.2.5 and I'm not seeing any issues. I'm not using any patches though. I added the CSS from #38 to my theme using the method described in #43.

Hi, made some changes for the CKEditor toolbar overflow issue. Please review the changes made. Attaching before and after changes screenshots for reference.

The Needs Review Queue Bot → tested this issue. It fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

Consult the Drupal Contributor Guide → to find step-by-step guides for working with issues.

Hello, a ";" is missing. line 38 to pass prettier.

@underscore_boy, I've fixed the css syntax error. Thanks for figuring out.

Mithun S → made their first commit to this issue’s fork.

Resolved the merge conflicts and added a rebase for the MR. Please review.

@matthieuscarset are you still seeing the issue you mentioned?

Left a comment on an open thread

I'm on Drupal 10.3.2 and the CSS code from #38 no longer works. I applied the patch (Merge request !5728), but that didn't do anything (although I see the changes from the patch were made to the core files).

Is there a fix for Drupal 10.3?

.ck.ck-toolbar.ck-toolbar_grouping > .ck-toolbar__items {
flex-wrap: wrap !important;
}

This CSS code still work for me, i m on Drupal 10.3.3

Thanks for checking this.

So turns out there is an issue where if you have a large inline image in one of the nested text editors, it causes issues. To fix, I added this CSS which limits the width of the inline images to 800px wide.

.ck.ck-editor__editable .image-inline {
  max-width: 800px;
}

After adding the wrapper icon in Editor settings as attached the editor is behaving responsive.

Thanks @sriharsha.uppuluri, that is the only way I could make it responsive

This issue is related to CkEditor field with unlimited values right? But after applying the changes of MR! 5728, it is affecting the CkEditor field with limited values also as mentioned in #3 🐛 CKEditor 5 toolbar items of multi-value field (typically Paragraphs) overflowing on narrow viewports and overlapping with node form's sidebar on wide viewports Needs work

The solution of removing "nowrap" doesn't look like a good approach to fix the issue as it's breaking the default behavior of the editor which wraps all the items into a popup when there are too many items.

Before:

After:

With 100% resolution

With 90% resolution

I think this is because of the following code:-

@media screen and (max-width: 90rem) {
  .ck .ck-editor__top .ck.ck-toolbar.ck-toolbar_grouping > .ck-toolbar__items {
    flex-wrap: wrap;
  }
}

Is it a new approach we are going to follow?