In the new CKE, and quite possible in the old ones as well, edit the CSS rule .cke_combopanel to contain a width rule like 300px or whatever.
The CSS file in question is ckeditor\skins\moono\editor.css - find the file for you in a similar location using the search function that your operating system hopefully provides. Good luck and godspeed.
This post is mostly to help those coming from Google.
I was struggling with the same issue. The .cke_combopanel rule controls all combo boxes so changing it will also effect the Styles, Format, Font and Size dropdown width.
I queried support and got the following response.
>>Just so I understand. You are saying that in 4.1.2 there is no way to change the width of an individual richcombo plugin without affecting all the dropdowns?
It seems there never was a way to style single panel. Visible dropdown button - yes but dropping down panel - No.
fyi: To extend the width of the button I used the following
My issue was similar, I needed to change the height of the drop down panel so that it remained within the editor area. However since content may be added or removed the height has to be dynamic every time you click on the drop down. I came up with a work around, probably not the most elegant thing ever, but it suits my needs currently.
I'm using the plugin.js file for strinsert, and where you declare: editor.ui.addRichCombo('strinsert',.....)
inside there's an init:function(){} that determines the name/value/title etc of the drop down options. Inside that init function I added:
The first setTimeout function only runs once - the first time this editor is opened and the init function is run. The second part adds an event listener to the drop down button itself - which you can't do until the init function has been run the first time because before that the drop down button won't have existed yet in the DOM. The setTimeout seems to be necessary since there are inline css styles being added to the drop down panel just after the init function completes, and the setTimeout just makes sure your new styles are being added afterwards so they override anything else.
The resizeComboPanel() function is where you tell your combo panel how tall/wide/whatever you want it to be. For myself I calculate the height of the editor's container, then tell the combopanel how tall it should be, with a max height so it doesn't get too ridiculous.
Re: Change the width of the richcombo dropdown?
I'm facing the same problem and it's pretty critical for my project.
I feel like a necromancer, awesome.
In the new CKE, and quite possible in the old ones as well, edit the CSS rule .cke_combopanel to contain a width rule like 300px or whatever.
The CSS file in question is ckeditor\skins\moono\editor.css - find the file for you in a similar location using the search function that your operating system hopefully provides. Good luck and godspeed.
This post is mostly to help those coming from Google.
necromancers, unite
I was struggling with the same issue. The .cke_combopanel rule controls all combo boxes so changing it will also effect the Styles, Format, Font and Size dropdown width.
I queried support and got the following response.
>>Just so I understand. You are saying that in 4.1.2 there is no way to change the width of an individual richcombo plugin without affecting all the dropdowns?
It seems there never was a way to style single panel. Visible dropdown button - yes but dropping down panel - No.
fyi: To extend the width of the button I used the following
.mergefields .cke_combo_inlinelabel {
width: 250px;
}
"mergefields" was the class name I gave in the plugin code with the line:
className: 'mergefields',
As req said, this is for google search results.
Change height or width of richcombo drop down
My issue was similar, I needed to change the height of the drop down panel so that it remained within the editor area. However since content may be added or removed the height has to be dynamic every time you click on the drop down. I came up with a work around, probably not the most elegant thing ever, but it suits my needs currently.
I'm using the plugin.js file for strinsert, and where you declare: editor.ui.addRichCombo('strinsert',.....)
inside there's an init:function(){} that determines the name/value/title etc of the drop down options. Inside that init function I added:
setTimeout(function(){
resizeComboPanel(editor.name);
}, 10);
$('.cke_combo_button').click(function(){
setTimeout(function(){
resizeComboPanel(editor.name);
}, 10);
});
The first setTimeout function only runs once - the first time this editor is opened and the init function is run. The second part adds an event listener to the drop down button itself - which you can't do until the init function has been run the first time because before that the drop down button won't have existed yet in the DOM. The setTimeout seems to be necessary since there are inline css styles being added to the drop down panel just after the init function completes, and the setTimeout just makes sure your new styles are being added afterwards so they override anything else.
The resizeComboPanel() function is where you tell your combo panel how tall/wide/whatever you want it to be. For myself I calculate the height of the editor's container, then tell the combopanel how tall it should be, with a max height so it doesn't get too ridiculous.
var resizeComboPanel = function(target){
var li_height = $("#" + target).closest("li").height();
var drop_down_height = li_height - 50;
if(drop_down_height > 170){
drop_down_height = 170;
}
$("#cke_" + target + " > .cke_combopanel").css('height', drop_down_height + 'px');
}