Wysiwyg fields with ckeditor toolbar can break out of sidebar

Created on 12 April 2024, 9 months ago
Updated 13 April 2024, 9 months ago

Problem/Motivation

Ckeditor toolbar with lots of buttons don't wrap.

Proposed resolution

Override css:

#drupal-off-canvas [data-drupal-ck-style-fence] .ck.ck-toolbar.ck-toolbar_grouping > .ck-toolbar__items {
  flex-wrap: wrap;
}
πŸ› Bug report
Status

Closed: works as designed

Version

1.0

Component

User interface

Created by

πŸ‡ΊπŸ‡ΈUnited States apmsooner

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @apmsooner
  • Status changed to Closed: works as designed 9 months ago
  • πŸ‡ΊπŸ‡ΈUnited States apmsooner

    This is not a bug with the module. Ckeditor toolbar in Drupal core by default doesn't wrap toolbar buttons so it breaks the layout. The solution for this is to drag a wrapping button divider in the ckeditor configuration into the active toolbar as described here: https://www.drupal.org/project/drupal/issues/3328095#comment-15173888 πŸ› CKEditor 5 toolbar overflow can become unusable in Off canvas Needs work

Production build 0.71.5 2024