When configuring the buttons available for CKEditor, the buttons do not display correctly - they are set to 16px wide, and part of the content is cut off.

Example path: /admin/config/content/formats/manage/basic_html

Thunder:

Seven (works as expected):

CommentFileSizeAuthor
#3 thunder-ckedit-buttons.patch2.89 KBmalcomio
buttons_thunder.png31.46 KBmalcomio
buttons_seven.png42.61 KBmalcomio

Comments

malcomio created an issue. See original summary.

malcomio’s picture

malcomio commented

A width of 16px is set on .ckeditor-buttons li .cke-icon-only in /core/themes/stable/css/ckeditor/ckeditor.admin.css?0 - removing this in browser dev tools addresses the issue (at least in Chrome).

The same style is there in seven as well - not sure why it doesn't cause a problem there, but may be best to override it with width: auto

malcomio’s picture

malcomio commented
Status: Active » Needs review
StatusFileSize
new thunder-ckedit-buttons.patch2.89 KB

The issue happens because of the box-sizing being border-box, rather than content-box, but I think it's probably better to set the width to auto.

Here's a patch that does that

daniel.bosen credited volker.k.

daniel.bosen’s picture

daniel.bosen
he/him
commented

daniel.bosen credited volkerk.

daniel.bosen’s picture

daniel.bosen
he/him
commented

  • daniel.bosen committed 35c4916 on 8.x-2.x authored by volkerk 
    Issue #2942194 by malcomio, volkerk: Editor buttons cut off

* Reset box...
daniel.bosen’s picture

daniel.bosen
he/him
commented
Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.