Problem

The buttons of the CKEditor toolbar configuration interface are mis sized.

Mis sized buttons of the CKEditor toolbar configuration interface.

Proposed resolution

Set the box-sizing of the buttons to content-box:

.ckeditor-buttons li .cke-icon-only {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

Remaining tasks

  • Review the proposed patch.
  • If the patch is accepted, apply this correction to the SASS sources and generate the CSS files from the LESS sources.

Original report by wheretoplaygames

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

wheretoplaygames created an issue. See original summary.

wheretoplaygames’s picture

Issue summary: View changes
Wim Leers’s picture

Status: Active » Postponed (maintainer needs more info)
Issue tags: -ckeditor, -Drupal 8.x

Please provide a screencast that demonstrates the problems.

wheretoplaygames’s picture

I was using a bootstrap 3 theme as the admin theme, which was causing the issues. I changed the admin theme to Bartik and everything works as expected now.

Wim Leers’s picture

Title: Toolbar not working when configuring HTML Basic editor » CKEditor toolbar drag-and-drop configuration UI not breaks when using Bootstrap 3 as admin theme
Project: Drupal core » Bootstrap
Version: 8.2.x-dev » 8.x-3.x-dev
Component: ckeditor.module » Code
Category: Support request » Bug report
Status: Postponed (maintainer needs more info) » Active

Great, thanks for checking that! Moving to the appropriate issue queue.

Maxime Gilbert’s picture

Title: CKEditor toolbar drag-and-drop configuration UI not breaks when using Bootstrap 3 as admin theme » Mis sized buttons of CKEditor toolbar configuration interface
Component: Code » CSS Overrides
Assigned: wheretoplaygames » Maxime Gilbert
Issue summary: View changes
FileSize
67.9 KB
865 bytes
Maxime Gilbert’s picture

Status: Active » Needs review
Maxime Gilbert’s picture

Issue summary: View changes

Recredit wheretoplaygames for his original report.

markhalliwell’s picture

Project: Bootstrap » Bootstrap Admin
Component: CSS Overrides » Code
Status: Needs review » Active

The Drupal Bootstrap base theme is not intended (out-of-the-box) to be an administrative theme, hence the various issues. Moving to the, even more, appropriate IQ to be dealt with (eventually).