Modifying the width of the CKEditor Styles dropdown

Posted on May 1, 2011 by Gabe Sumner

CKEditor comes included with a handy-dandy style selector:

The style selector of CKEditor's toolbar

Unfortunately this style selector defaults to a very small width.  This small width can result in larger styles being truncated:

CKeditor's style selector toolbar is too small and cuts off the text.

Thankfully this can be fixed with a couple of custom styles:

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

CKEditor's style selector is now wider

Where should these styles be put?

For my own project, I was using the contentsCss setting to apply a set of custom CSS styles to CKEditor.  Consequently, I simply put the styles shown above in this file.

However, these styles could also be put in the Editor.css file for the skin being used by CKEditor.  (The default skin is the Kama skin.)

Lastly, it’s possible these styles might not work with other (non-Kama) skins.

Best of luck!

This entry was posted in Uncategorized and tagged , . Bookmark the permalink.
  • http://profiles.google.com/fredck Frederico Knabben

    Thanks for another article, Gabe!

    Let me give you some hints, so we can write this with four hands.

    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:

    /* 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;
    }

    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!

    • http://gabesumner.com Gabe Sumner

      Hi Frederico, thanks for your wonderful comment (which is far more informative than my original post). This helps greatly. Hopefully this will save others time as well. Best wishes.

  • http://profile.yahoo.com/LQMCLFMVQ3LU77H54KFNN5V7HU swetha

    great Tutorial. You saved me lot of my time