web-dev-qa-db-fra.com

Bouton de sélection de style comme bootstrap 2.3 au lieu de selected.js

Dans le dossier administrateur de Joomla, chaque boîte de sélection est automatiquement stylée avec le plug-in Chosen.js. Mais certains boutons sont stylés avec Bootstrap. Existe-t-il un moyen de rendre l’élément Select ressemblant à un menu déroulant bootstrap)?

Pourquoi ai-je besoin de ça? Par exemple, dans l'article modifier plus, il y a plusieurs boutons en bas (comme "Article", "Image", "Saut de page" et "Lire plus"). J'utilise un plugin qui a ajouté un bouton de sélection à côté de ces boutons et la hauteur du bouton choisi est nettement inférieure à celle des boutons bootstrap. Voir cette image:

enter image description here

J'aimerais que ce menu déroulant ressemble davantage à l'autre bouton situé à côté. Étant donné que le code ajoute uniquement un élément select et que selected.js génère des éléments dom supplémentaires, je ne sais pas comment je peux ajuster ce style sans affecter tous les autres éléments de sélection de la page.

Je suis curieux de savoir s’il existe une solution facile ou s’agit-il d’un problème connu de Joomla?

bootstraptwitter-bootstrap-2
2
lanoxx

Vous devrez ouvrir le fichier suivant:

plugins/editors/switcher/switcher.php

Ensuite, allez à la ligne 180 , où vous verrez ceci:

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

que vous devez remplacer par ceci:

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

Ensuite, en ligne 190 , vous verrez les éléments suivants:

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

Directement au-dessous, ajoutez le code suivant:

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; }
');

Résultat:

enter image description here

J'espère que cela t'aides

1
Lodder