style combo width

Took a bit of digging into the html and experimenting with the element styles to figure out how to make this work.

First, here is a sample section of a rendered CKEditor control, this is for the Font combo (I removed the event handlers from the <a> element for clarity):

<span class="cke_rcombo">
   <span id="cke_12" class="cke_font cke_off">
      <span id="cke_12_label" class="cke_label">Font</span>
      <a aria-labelledby="cke_12_label" title="Font Name">
         <span>
            <span id="cke_12_text" class="cke_text cke_inline_label">Font</span>
         </span>
         <span class="cke_openbutton"></span>
      </a>
   </span>
</span>

It turns out the element that is controlling the width of the whole thing is the innermost span, everything else auto-sizes around it. So the challenge now is to assign a width to that span. The id has a number (12 in this case) that represents the position of the combo in the toolbars, so a more generic solution is to find the element by class. I chose to reference the class indicating the font combo (cke_font) to make sure I changed the right span, which has the class cke_text.

It wasn't sufficient to change the style directly in the jquery ready function, as the ckeditor setup seems to take place after this, so you need to feed the ckeditor instance a function to execute when it is ready. The javascript looks like this, e.g. for an editor with the id of "txtEditor":

      $(document).ready(function()
      {
         $('#txtEditor').ckeditor(StyleCKEditor);
      });

      function StyleCKEditor()
      {
         $('.cke_font .cke_text').css('width', '123px');
      }

The open button and other margins around this span add up to 27px, which you can use to formulate an outer width. Above, I use 123px for a total width of 150px for the combo.

I believe this method should work for the other combo boxes, it's just a matter of finding the class names used for those elements.