CODEWITHSUNDEEP
javascriptckeditor
Adam Sznajder
Adam Sznajder

Reputation: 9206

Change the size of the "format" drop down menu in CKEditor

I would like to change the size of "format" drop down menu (select) in CKEditor. How can I do this?

enter image description here

Upvotes: 2

Views: 3026

Answers (2)

nick
nick

Reputation: 3700

I'm using CKEditor 4 and the following classes are assigned to the format menu:

cke cke_reset_all cke_1 cke_panel cke_combopanel cke_ltr

and the styles menu has:

cke cke_reset_all cke_1 cke_panel cke_combopanel cke_ltr cke_combopanel__styles

So you'll need to use cke_panel or cke_combopanel but this will also affect the styles menu, but you can then override them again with cke_combopanel__styles:

.cke_combopanel {
     width: 250px !important;
}
.cke_combopanel__styles {
    width: 150px !important;
}

Note: The css must go into your main document's styles and not the CKEditor's styles. This is because the classes are assigned to divs which wrap the iframes containing the menus, and not within the iframes themselves, where the CKEditor styles are loaded.

Upvotes: 2

fredck
fredck

Reputation: 369

Simply change the .cke_format_panel class styles. Use !important just to be sure:

.cke_format_panel
{
    height: 250px !important;
}

Upvotes: 3

Related Questions