web-dev-qa-db-fra.com

Le style choisi.js n'est pas conforme aux styles Bootstrap3

J'utilise selected.js v1.0 et je l'utilise dans mon projet avec Bootstrap 3 mais les styles de mes boîtes de sélection ne sont pas conformes à ceux de bootstrap 3. 

Est-ce que je fais quelque chose de mal? J'ai simplement appelé les boîtes de sélection à l'aide de 
$('#select-input').chosen(); n'est-ce pas?

enter image description here

twitter-bootstrap-3jquery-chosen
23
cyberjar09

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

Quelques écrans:

enter image description here

enter image description here

enter image description here

Le thème est disponible dans ce numéro de Github Utilisez Gist ci-dessous.

Modifier

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

Et aussi, je maintiendrai le thème dans cet article: https://Gist.github.com/koenpunt/6424137

50
Koen.

Une feuille de style alternative pour Chosen 1.0. Celui-ci est censé mieux s'intégrer à Bootstrap 3.0.

Disponible ici http://alxlit.github.io/bootstrap-chosen/

screenshot of chosen alternative

13
Subtletree

Un autre thème alternatif prend en charge Bootstrap 3 ici https://github.com/dbtek/chosen-bootstrap .

Ressemble aux entrées bs natives.

chosen-bootstrap

6
dbtek

Si vous souhaitez modifier les tailles des boîtes de sélection afin qu'elles soient réactives, 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

0
Alireza Fattahi

Chosen.js (selected.css) et le bootstrap css ajoutent tous deux des styles CSS à vos entrées (selects). Essayez de charger Choose.css après bootstrap.css:

  <link rel="stylesheet" href="bootstrap3/bootstrap-3.0.0-wip/dist/css/bootstrap.css">
  <link rel="stylesheet" href="docsupport/style.css">
  <link rel="stylesheet" href="docsupport/prism.css">
  <link rel="stylesheet" href="chosen.css">
  <style type="text/css" media="all">
    /* fix rtl for demo */
    .chosen-rtl .chosen-drop { left: -9000px; }
  </style>

Après cela, voir: Le bord droit du compteur AddThis manque avec Bootstrap 3 de Twitter . Il semble que le sélecteur universel de CSS pour définir la taille de la boîte sur border-box a été à l'origine de la plupart des problèmes.

Pour résoudre ce problème, réinitialisez la taille de la boîte des éléments que vous appliquez à choisi () sur:

Dans le cas de $('#select-input').chosen();, vous définissez également: 

#select-input
{
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
      box-sizing: content-box;
}

NB par défaut, choisi.js regroupe une ancienne version de jQuery. Twitter Bootstrap (javascript) requiert la dernière version (<2) de jQuery.

0
Bass Jobsen