Opened 14 years ago

Last modified 4 years ago

#6162 assigned New Feature

Toolbar Combobox Widths should be configurable

Reported by: Michael G. Schneider Owned by: Jakub Ś
Priority: Normal Milestone:
Component: UI : Toolbar Version: 3.0
Keywords: Cc:

Description

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

Change History (27)

comment:1 Changed 14 years ago by Tobiasz Cudnik

Milestone: CKEditor 3.5
Owner: set to Tobiasz Cudnik
Status: newassigned

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.

comment:2 Changed 14 years ago by 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

comment:3 Changed 14 years ago by 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

comment:4 Changed 14 years ago by Charlie

Summary: Tollbar Combobox Widths should be configurableToolbar Combobox Widths should be configurable

comment:5 Changed 14 years ago by Michael G. Schneider

Thanks a lot for the answer.

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

Michael

comment:6 Changed 14 years ago by Frederico Caldeira Knabben

Milestone: CKEditor 3.5

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

comment:7 Changed 14 years ago by Frederico Caldeira Knabben

Component: GeneralUI : Toolbar

comment:8 Changed 14 years ago by Michael G. Schneider

Version: 3.4 Beta3.4

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

comment:9 Changed 13 years ago by 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.

comment:10 Changed 13 years ago by Frederico Caldeira Knabben

Keywords: Doc? added
Owner: Tobiasz Cudnik deleted
Status: assignednew

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.

comment:11 Changed 13 years ago by 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.

comment:12 Changed 13 years ago by 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!

comment:13 Changed 12 years ago by Jakub Ś

Status: newconfirmed
Version: 3.43.0

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.

comment:14 Changed 12 years ago by Jakub Ś

#4559 was marked as duplicate.

comment:15 Changed 11 years ago by Jakub Ś

#10385 was marked as duplicate.

comment:16 Changed 11 years ago by 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.

comment:17 Changed 11 years ago by 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?

comment:18 Changed 10 years ago by 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.

Last edited 4 years ago by Jakub Ś (previous) (diff)

comment:19 Changed 10 years ago by Jakub Ś

#11025 was marked as duplicate.

comment:20 Changed 10 years ago by 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.

Last edited 10 years ago by sirtet (previous) (diff)

comment:21 Changed 10 years ago by Jakub Ś

Owner: set to Jakub Ś
Status: confirmedassigned

comment:22 Changed 10 years ago by 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.

Last edited 10 years ago by Roy Shoa (previous) (diff)

comment:23 Changed 10 years ago by 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.

comment:24 in reply to:  23 Changed 10 years ago by 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 and 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.

Last edited 10 years ago by Roy Shoa (previous) (diff)

comment:25 in reply to:  22 Changed 9 years ago by 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);
}

comment:26 Changed 9 years ago by 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.

comment:27 Changed 9 years ago by Jakub Ś

Keywords: Doc? removed

#13746 was marked as duplicate.

Note: See TracTickets for help on using tickets.
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy