Ticket #6162 (assigned New Feature)

Opened 4 years ago

Last modified 2 months ago

Toolbar Combobox Widths should be configurable

Reported by: mgs Owned by: j.swiderski
Priority: Normal Milestone:
Component: UI : Toolbar Version: 3.0
Keywords: Doc? 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

comment:1 Changed 4 years ago by tobiasz.cudnik

  • Status changed from new to assigned
  • Owner set to tobiasz.cudnik
  • Milestone set to CKEditor 3.5

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 4 years ago by 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

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

comment:4 Changed 4 years ago by comp615

  • Summary changed from Tollbar Combobox Widths should be configurable to Toolbar Combobox Widths should be configurable

comment:5 Changed 4 years ago by mgs

Thanks a lot for the answer.

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

Michael

comment:6 Changed 4 years ago by fredck

  • Milestone CKEditor 3.5 deleted

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 4 years ago by fredck

  • Component changed from General to UI : Toolbar

comment:8 Changed 4 years ago by mgs

  • Version changed from 3.4 Beta to 3.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 3 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 3 years ago by fredck

  • Owner tobiasz.cudnik deleted
  • Keywords Doc? added
  • Status changed from assigned to new

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 3 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 3 years ago by 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!

comment:13 Changed 2 years ago by j.swiderski

  • Status changed from new to confirmed
  • Version changed from 3.4 to 3.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 2 years ago by j.swiderski

#4559 was marked as duplicate.

comment:15 Changed 18 months ago by j.swiderski

#10385 was marked as duplicate.

comment:16 Changed 18 months ago by 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.

comment:17 Changed 18 months ago by 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?

comment:18 Changed 12 months ago by j.swiderski

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__style .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 2 months ago by j.swiderski (previous) (diff)

comment:19 Changed 12 months ago by j.swiderski

#11025 was marked as duplicate.

comment:20 Changed 12 months 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 11 months ago by sirtet (previous) (diff)

comment:21 Changed 12 months ago by j.swiderski

  • Status changed from confirmed to assigned
  • Owner set to j.swiderski

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

Last edited 10 months ago by royshoa (previous) (diff)

comment:23 follow-up: ↓ 24 Changed 10 months ago by 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.

comment:24 in reply to: ↑ 23 Changed 10 months ago by royshoa

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 months ago by royshoa (previous) (diff)
Note: See TracTickets for help on using tickets.
© 2003 – 2012 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy