Chosen.js le style n'est pas conforme à Bootstrap3 styles

Im en utilisant chosen.js v1.0 et je suis de l'utiliser dans mon projet avec Bootstrap 3, mais les styles de mon sélectionnez les cases ne sont pas conformes à la méthode bootstrap 3 styles à tous.

Je fais quelque chose de mal? J'ai simplement invoqué la sélectionnez les cases à l'aide

$('#select-input').chosen(); droit?

InformationsquelleAutor cyberjar09 | 2013-08-21

jquery-chosen twitter-bootstrap-3

50

En fait, il y a quelqu'un qui a créé un Bootstrap 3.0 CSS du thème Choisi.

Certains écrans:

~~Le thème est disponible en cette question Github~~ l'Utilisation de Gist ci-dessous.

Modifier

J'ai créé un Violon en utilisant le même code HTML que l'officiel Choisi la page de documentation avec le Bootstrap thème appliqué. (ajouté form-control à tous les sélectionne et supprimé style="width:350px;")

Et aussi, je vais être le maintien de ce thème essentiel: https://gist.github.com/koenpunt/6424137
- Il Fonctionne 🙂 Merci à vous !
InformationsquelleAutor Koen.
13

Une autre feuille de style pour Choisi 1.0. Ce que l'on est censé mieux s'intégrer avec Bootstrap 3.0.

Disponible ici http://alxlit.github.io/bootstrap-chosen/
- Ce travail est un régal pour moi - joue aussi bien avec des de verdure.
InformationsquelleAutor Subtletree
6

Il y a aussi un autre thème prend en charge Bootstrap 3 ici https://github.com/dbtek/chosen-bootstrap.

Ressemble natif bs entrées.

InformationsquelleAutor dbtek
0

Chosen.js (choisi.css) et le bootstrap css à la fois d'ajouter des styles CSS pour vos entrées (sélectionne). Essayez de charger choisi.css après bootstrap.css:
```
  <link  href="bootstrap3/bootstrap-3.0.0-wip/dist/css/bootstrap.css">
  <link  href="docsupport/style.css">
  <link  href="docsupport/prism.css">
  <link  href="chosen.css">
  <style type="text/css" media="all">
    /* fix rtl for demo */
    .chosen-rtl .chosen-drop { left: -9000px; }
  </style>
```
Après avoir fait cela, voir: Bordure droite de la AddThis contre manquant de Twitter Bootstrap 3. Il semble que le CSS du sélecteur universel pour définir box-sizing à border-box causé plus de problèmes.

Pour résoudre ce réinitialiser la box-sizing des éléments d'appliquer choisi() sur:

Dans le cas de $('#select-input').chosen(); vous permettra également de définir:
```
#select-input
{
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
      box-sizing: content-box;
}
```
NB par défaut chosen.js bundles une ancienne version de jQuery. Twitter Bootstrap (javascript) nécessite la dernière version (<2) de jQuery
- J'ai validé le choisi.min.le fichier css est chargé après bootsrap.css et ont appliqué les styles, comme le prescrit. Ne semble toujours pas à résoudre le problème. Im en utilisant jQuery 1.10.2 sur la page
- pouvez-vous montrer un exemple de code montrant le problème? (j'ai test ci-dessus avec le index.html livré avec chosen.js)
InformationsquelleAutor Bass Jobsen

Si vous voulez changer la boîte de sélection des tailles sensible que vous pouvez utiliser:

[class*="col-"] .chosen-container {
    width:98%!important;
}
[class*="col-"] .chosen-container .chosen-search input[type="text"] {
    padding:2px 4%!important;
    width:90%!important;
    margin:5px 2%;
}
[class*="col-"] .chosen-container .chosen-drop {
    width: 100%!important;
}

Source : https://github.com/harvesthq/chosen/issues/1004

InformationsquelleAutor Alireza Fattahi

Vous devez vous connecter pour publier un commentaire.

Le thème est disponible en cette question Github l'Utilisation de Gist ci-dessous.