Toolbar Combobox Widths should be configurable

[mgs]

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.

[mgs]

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

[comp615]

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

[mgs]

Thanks a lot for the answer.

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

Michael

[fredck]

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".

[mgs]

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.

[fredck]

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.

[fredck]

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!

[j.swiderski]

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.

[j.swiderski]

#4559 was marked as duplicate.

[j.swiderski]

#10385 was marked as duplicate.

[wwalc]

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.

[varyen]

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?