How to increase the size of a select box, in Tinymce?

Question

I just wrote a tinymce plugin, which has a drop down box. I can increase the size of the select box, by manipulating the CSS file of the advanced theme (the theme I am using). Is there any other way to do it, without changing the CSS? Say in the function of the javascript code that actually creates the select box?

Edit: I did set the max_width property while creating the listbox, in the createListBox function. But it only changes the width of the elements in the dropdown, not the drop down itself :(

Answer 1

You can always change the css using javascript:

document.getElementById("ATTRIBUTE_ID").style.width = "1000px";

See this SOF link for more details: Change an element's class with JavaScript

Answer 2

You should have a closer look at the tinymce configuration option editor_css. Using this setting you may configure a css file which will overwrite the default css for the toolbar stuff. This way you don't need to change anything of the core css.

Answer 3

tinymce dropdown generates internally and it's hard to do this in right way, but you always can access the needed element by CSS like:

div[id*='mceu_'].mce-container.mce-panel.mce-floatpanel.mce-menu.mce-animate.mce-fixed.mce-menu-align.mce-in div.mce-container-body.mce-stack-layout {
  max-height: 200px !important;
}

for me it works for all dropdown select lists inside modal windows like link-plugin - reduce height of select list block.