Style select button like bootstrap 2.3 instead of chosen.js

Question

In the administrator backend of Joomla each select box is automatically styled with the Chosen.js plugin. But some buttons are styled with Bootstrap. Is there a way that I can make the Select element look like a bootstrap dropdown?

Why do I need this? For example in the article edit more there are several button at the bottom (like 'Article', 'Image' 'Page Break', and 'Read More'). I use a plugin that added a select button next to those buttons and the heigth of the chosen button is significantly lower than that of the bootstrap buttons. See this image:

I would like to have this dropdown look more like the other button next to it. Since the code only adds a select element and chosen.js generates additional dom elements from that I don't know how I can adjust that style without affecting every other select element on the page.

I am curious if there is an easy solution, or is this maybe a known problem of Joomla?

Answer 1

You will need to open the following file:

plugins/editors/switcher/switcher.php

Then go to line 180, where you'll see this:

. '<div id="switcherSelector" style="vertical-align:middle;margin:0 0 0 5px;display:inline-block;"><input type="hidden" id="editorswitcher-currentvalue" value="'

which you need to replace with this:

. '<div id="switcherSelector" class="btn-toolbar"><input type="hidden" id="editorswitcher-currentvalue" value="'

---

Then online 190, you will see the following:

JFactory::getDocument()->addScriptDeclaration($js);

Directly below this, add the following code:

JFactory::getDocument()->addStyleDeclaration('
    #switcherSelector { display: inline-block; margin-left: 5px; }
    #switcherSelector .chzn-container-single .chzn-single { height: 26px; line-height: 26px; }
    #switcherSelector .chzn-container-single .chzn-single div { top: 2px; }
');

---

Result:

Hope this helps