Toolbar Combobox Widths should be configurable

[Michael G. Schneider]

The width of the toolbar comboboxes (style, format, fontsize, etc.) should be configurable. Most of the time the name of the selected item is abbreviated and cannot be read.

There is no need for adjusting the width to the combobox content. Being able to set the width manually is fine.

Michael

[Tobiasz Cudnik]

You can do it using custom CSS for following selector:

.cke_skin_kama .cke_rcombo .cke_text {
  width: 10em;
}

Although we can have it as config setting in 3.5 maybe.

[Michael G. Schneider]

Thanks a lot for the answer. I took "fullpage.html", then inserted into the head section...

<style type="text/css">
 .cke_skin_kama .cke_rcombo .cke_text { width: 10em;  } 
</style>

However, nothing changed.

Michael

[Charlie]

Mnnn you probably are going to need to apply it in the skin file css because the css is loaded after the page is, thus it will override your settings. (Or you could use a JS method, whatever). You can verify all this using firebug.

Also, note that the font size box is overriden elsewhere in the skin, so you will have to add another entry if you want to change that one. It'll obviously vary by skin:

.cke_skin_kama .cke_fontSize .cke_text

[Michael G. Schneider]

Thanks a lot for the answer.

I think it is best to wait until it is configurable.

Michael

[Frederico Caldeira Knabben]

This, just like most of the UI design, must definitely be limited to CSS styling, without configuration options (and source code bloating).

We must just be sure there is a way to override it inpage, without having to touche the sking files. Much probably, the overriding styles must be marked with "!important".

[Michael G. Schneider]

I do not know CKEditor very well. Just for a couple of days. I do not know whether the following has any unwanted side effects. That said...

For making the top part of a combobox wider

span.cke_rcombo > span.cke_format > a { width: 200px !important; } 
span.cke_rcombo > span.cke_format > a > span > span { width: 170px !important; }

For making the drop down part of a combobox wider

div.cke_panel.cke_ltr.cke_rcombopanel { width: 300px !important; }

I think this is much too complicated. It should be made easier. Moreover the drop down part of all comboboxes is changed. For example, it is not possible to make the drop down part of "styles" wider than that of "sizes".

Michael

[gabesumner]

Hello everyone,

I was able to restyle (widen) the styles dropdown with a couple of stylesheets:

div.cke_panel.cke_ltr.cke_rcombopanel { width: 300px !important; }
span.cke_rcombo span.cke_styles a span span.cke_text { width: 150px; }

I did not need to modify the skin, although I am applying an external stylesheet to CKEditor. I put these styles into that stylesheet.

[Frederico Caldeira Knabben]

We're not intended to have this as a configuration as it can be easily set through CSS. What we do need is documentation for this. I'm leaving the ticket open until then.

[gabesumner]

I wrote this: ​http://gabesumner.com/modifying-the-width-of-the-ckeditor-styles-dropdown

If it helps, feel free to copy it and turn it into documentation.

[Frederico Caldeira Knabben]

Thanks for the article and for the proposal, Gabe!

The following is the comment I've added at your pages. I'm putting it here for reference:

---

Some default styles for editor elements have been appositely defined in a specific dedicated file in the skins folder, called "presets.css":
​http://dev.ckeditor.com/browser/CKEditor/trunk/_source/skins/kama/presets.css

By looking at that file, it's clear how to make changes to some UI elements, including the combos. It should be enough to "override" those CSS definitions.

For example, you can put the following anywhere in your page, in your CSS file, etc:

<style type="text/css">

/* Set the width for all combos */
.cke_rcombo .cke_text
{
width: 100px !important;
}

/* Set the width of the "combo-panel" for all combos */
.cke_rcombopanel
{
width: 300px !important;
}

/* Set the "Format" combo width only */
.cke_format .cke_text
{
width: 150px !important;
}

/* Set the "Format" panel width only */
.cke_format_panel
{
width: 550px !important;
}

</style>

Note that I've removed the .cke_kama "prefix". This makes the styles simpler and will make these rules effective for all skins. It's up to you to target it to a specific skin or not.

By marking the rules with "!important", we have solved the issue regarding the order of the CSS files.

The above simplifies the styles you have used on your article, making the customization clearer and easier to maintain.

I hope that helps!

[Jakub Ś]

Perhaps some examples in our HOWTOs page (​http://docs.cksource.com/CKEditor_3.x/Howto) explaining how to change width of dropdown and button would do.

[Jakub Ś]

#4559 was marked as duplicate.

[Jakub Ś]

#10385 was marked as duplicate.

[Wiktor Walc]

In #10385 varyen suggested setting widths in language files. It could introduce same issues like #10368.

However, it looks there is a simple way to achieve the same thing. Just like we have cke_ltr class, we could introduce

cke_lang_<lang code>

class (e.g. cke_lang_en, cke_lang_fr, ck_lang_de etc.). This way certain elements in CKEditor UI which are troublesome in different languages could by styled better.

[Vladimir Pluzhnikov]

Adding CSS class to core element makes sense and can be useful. Also, maybe it would be more flexible to set widths for elements, depending on text fields, in ems, not pxs?

[Jakub Ś]

Below are classess used by dropdowns in CKEditor 4.x for default moono skin

Dropdown buttons on toolbar:

• .cke_combo__font .cke_combo_text
• .cke_combo__fontsize .cke_combo_text
• .cke_combo__format .cke_combo_text
• .cke_combo__styles .cke_combo_text

Dropdown panels:

• .cke_combopanel__font
• .cke_combopanel__fontsize
• .cke_combopanel__format
• .cke_combopanel__styles

To resize editor droprown button and panel for e.g. Format, please add the following rules in your page css file:

.cke_combo__format .cke_combo_text{
width:150px !important;
}

.cke_combopanel__format {
width:250px !important;
}

These rules can be included in head section of HTML page, can be put in external CSS file which is then imported to HTML page (with link tag) or can in editor CSS skin files directly like presets.css or editor.css.

[Jakub Ś]

#11025 was marked as duplicate.

[sirtet]

My solution was to add the following to a stylesheet of my site:

.cke_combo_text {
  width: auto !important;
}

This makes the width variable, so content always fit. Some people might not like the fact that the box changes it's width dependent on it's content.

[Roy Shoa]

Hi, Are there is an option to remove the font-size design in the Dropdown Panel of the Font Size ?

In my case I increase the selection option to be from 8 to 100 and the numbers are not looking good when its starting to go over to 80 size.

I like to remove the font-size design and make all the preview options as font-size: 14px.

To do it I found this class "cke_panel_listItem" on the LI tags but I think that it will take affect also on another combo box like format, style, etc.

I did not find witch parent class I need to use to exist from it so the change will apply only to the Font Size Dropdown Panel.

[Jakub Ś]

@royshoa I'm not exactly sure what do you mean by increasing selection from 8 to 100 but to modify only one dropdown please see comment:18 where I have given classes that influence only one particular dropdown.

[Roy Shoa]

Replying to j.swiderski:

@royshoa I'm not exactly sure what do you mean by increasing selection from 8 to 100 but to modify only one dropdown please see comment:18 where I have given classes that influence only one particular dropdown.

CKEditor default font size selection is from size 8 to size 72 and I increase it to be from size 8 to size 100. The CKEditor font size select box has a font-size: xx on every font size that you can choose and in my case the fonts size 80+ are to big on go out from the select box. Now, I do not like to increase the select box width because it will be not nice, instead I like to remove the font-size definition from every font that display in the select box and I do not know the class name that I need to use to do it.

[decherneyg]

Replying to royshoa:

Hi, Are there is an option to remove the font-size design in the Dropdown Panel of the Font Size ?

In my case I increase the selection option to be from 8 to 100 and the numbers are not looking good when its starting to go over to 80 size.

I like to remove the font-size design and make all the preview options as font-size: 14px.

To do it I found this class "cke_panel_listItem" on the LI tags but I think that it will take affect also on another combo box like format, style, etc.

I did not find witch parent class I need to use to exist from it so the change will apply only to the Font Size Dropdown Panel.

---

Not sure if you still need it but I ran into the exact same requirement so I thought I would post my solution here. Also I am using CKEditor version 4 so I dont know if this will apply to your setup as the ticket is under CKEDitor 4.

I set up an instanceReady handler and inside of that I inject the css rules into the panel of the fontsize richcombo object.

 instanceReady: function (event) {
    //inject style for font size dropdowns
    var css = '.cke_panel_listItem span { font-size: 100% !important; }';
    this.ui.items["FontSize"].panel.css.push(css);
}

[A. Risager]

This is what did it for me. Works in IE11 and Chrome V41 and CKEditor version 4.4

.cke_combofontsize > a, .cke_comboformat > a {

width:120px !important;

}

.cke_combofontsize > a > span:first-child, .cke_comboformat > a > span:first-child {

width:75% !important;

}

None of the other posted solutions worked for me.

[Jakub Ś]

#13746 was marked as duplicate.