Toolbar overflow fails to calculate the correct width when ckeditor is within a fieldset

[bentiedt]

📝 Provide detailed reproduction steps (if any)

1. Download a sample package for CKEditor (ClassicEditor)
2. Edit the included sample/index.html file and wrap <div class="centered">...</div> with <form><fieldset>...</fieldset></form>
3. Load the editor in a browser and resize the browser's width so that the toolbar should collapse and show the overflow ellipsis

✔️ Expected result

The toolbar is fit to the width of the browser and the overflow ellipsis are shown.

❌ Actual result

The toolbar is never resized and continues to show all items and the editor overflows the browser viewport's width.

❓ Possible solution

I don't have a possible solution. I've tried variations of display, position, overflow, width, max-width on the fieldset with no work-around.

📃 Other details

• Browser: Safari 15.3, Chrome 98.0, Firefox 97.0.1, Edge 98.0
• OS: Safari/Chrome/Firefox on MacOS 11.6.4, Edge on Windows 11
• First affected CKEditor version: Unknown, identified in 5.32
• Installed CKEditor plugins: Alignment, Autoformat, AutoLink, BlockQuote, Bold, Code, DataFilter, DataSchema, Essentials, FindAndReplace, FontBackgroundColor, FontColor, FontFamily, FontSize, Heading, HorizontalLine, HtmlComment, Image, ImageCaption, ImageResize, ImageStyle, ImageToolbar, Indent, IndentBlock, Italic, Link, LinkImage, List, ListProperties, Paragraph, PasteFromOffice, RemoveFormat, SourceEditing, SpecialCharacters, SpecialCharactersArrows, SpecialCharactersCurrency, SpecialCharactersLatin, SpecialCharactersMathematical, SpecialCharactersText, Strikethrough, Subscript, Superscript, Table, TableCaption, TableCellProperties, TableProperties, TableToolbar, TextTransformation, Underline, AlignmentEditing, AlignmentUI, Delete, BlockQuoteEditing, Enter, BlockQuoteUI, BoldEditing, BoldUI, CodeEditing, TwoStepCaretMovement, CodeUI, Widget, WidgetTypeAround, Clipboard, ClipboardPipeline, DragDrop, PastePlainText, SelectAll, SelectAllEditing, SelectAllUI, ShiftEnter, Typing, Input, Undo, UndoEditing, UndoUI, FindAndReplaceEditing, FindAndReplaceUI, FontBackgroundColorEditing, FontBackgroundColorUI, FontColorEditing, FontColorUI, FontFamilyEditing, FontFamilyUI, FontSizeEditing, FontSizeUI, HeadingEditing, HeadingUI, HorizontalLineEditing, HorizontalLineUI, ImageBlock, ImageBlockEditing, ImageEditing, ImageUtils, ImageTextAlternative, ImageTextAlternativeEditing, ImageTextAlternativeUI, ContextualBalloon, ImageInline, ImageInlineEditing, ImageCaptionEditing, ImageCaptionUI, ImageResizeEditing, ImageResizeHandles, WidgetResize, ImageResizeButtons, ImageStyleEditing, ImageStyleUI, WidgetToolbarRepository, IndentEditing, IndentUI, ItalicEditing, ItalicUI, LinkEditing, LinkUI, LinkImageEditing, LinkImageUI, ListEditing, ListUI, ListPropertiesEditing, ListPropertiesUI, RemoveFormatEditing, RemoveFormatUI, PendingActions, StrikethroughEditing, StrikethroughUI, SubscriptEditing, SubscriptUI, SuperscriptEditing, SuperscriptUI, TableEditing, TableUtils, TableUI, TableSelection, TableMouse, TableKeyboard, TableClipboard, TableCaptionEditing, TableCaptionUI, TableCellPropertiesEditing, TableCellPropertiesUI, TablePropertiesEditing, TablePropertiesUI, UnderlineEditing, UnderlineUI

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[yyss8]

Getting same issue when the ckeditor is wrapped inside a table element

See https://codepen.io/yyss8/pen/ExpmMzO

[wimleers]

drupal.org issue: https://www.drupal.org/project/drupal/issues/3332416, reported by @yyss8.

The solution they propose: remove flex-wrap: nowrap.

[smustgrave]

Related to the issue wimleers posted https://www.drupal.org/project/drupal/issues/3328095

[Witoso]

@oleq what are your thoughts on this?

[oleq]

Please check out this playground I prepared: https://codepen.io/anow_cks/pen/oNJVroo.

A few words of explanation:

• The logic that groups toolbar items when they get added boils down to the following:
  1. Add an item (green bg) to the toolbar (green dashed border).
  2. If the new item's bounding rect fits in the toolbar, it stays.
  3. If the new item's bounding rect does not fit, it lands in the grouping dropdown ("ellipsis" dropdown).
  4. Go to 1.
• Because of how the above works, the editor toolbar must be a non-wrapping flex container. Otherwise, discovering the fact that an item does not fit becomes a challenge.
• Tables in HTML/CSS (unlike divs) are always stretching to fit their content (not their parent). They will stretch as far as possible to "embrace" the content.
  • Since the toolbar is a non-wrapping container, it will repeat the 1-4 logic that I outlined and stretch the table as far as it wants. 3. will never occur because the table will always expand, there's no limit.
• It's pretty much the same story with forms/fieldsets. They also stretch as far as is needed and the editor toolbar never encounters a width restriction and never falls into 3..
• In other words, if you look at the playground, grouping will only be possible if the toolbar (green dashed border) has a sane width restriction.
• You can apply table { table-layout: fixed } (for tables) and fieldset { display: contents } to workaround the issue and force these containers to be less flexible.

Maybe there is another way of determining whether the toolbar overflows that does not involve a non-wrappable toolbar container and checking the intersection of bounding client rects. AFAIR I had to work around plenty of caveats while implementing this logic. In the end, this was the only sane approach that really worked out. I'd have to go back to square one and start another research if we find the current solution unacceptable, though.

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[CKEditorBot]

We've closed your issue due to inactivity. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).