2

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:

enter image description here

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?

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:

enter image description here

Hope this helps

  • A very nice solution, works exactly like I expected. – lanoxx Nov 12 '15 at 17:03
  • @lanoxx - Glad it helped – Lodder Nov 12 '15 at 17:07
  • I published the changes at https://github.com/lanoxx/editorswitcher. It would be nice if this could make it back to the original upstream source but I am not sure how to contact the original author. In the mean anyone interested can use my repository. – lanoxx Nov 12 '15 at 22:48
  • @lanoxx - If the original author can't be contacted via their website. Keep the repository. I'll probably add some PR's as it's using old deprecated code – Lodder Nov 12 '15 at 22:51
  • I left a comment on his website, lets see if he contacts me. You are welcome to send me pull requests on github. – lanoxx Nov 13 '15 at 11:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.