twitter-bootstrap-3 - change - chosen();
El estilo de Chosen.js no se ajusta a los estilos Bootstrap3 (5)
Estoy usando chosen.js v1.0 y lo estoy usando en mi proyecto con Bootstrap 3, pero los estilos de mis cuadros de selección no se ajustan a los estilos bootstrap 3 en absoluto.
¿Estoy haciendo algo mal? Simplemente invoqué las cajas de selección usando
$(''#select-input'').chosen(); ¿derecho?
Una hoja de estilo alternativa para Chosen 1.0. Se supone que este se debe integrar mejor con Bootstrap 3.0.
Disponible aquí http://alxlit.github.io/bootstrap-chosen/
Chosen.js (chosen.css) y bootstrap css agregan estilos CSS a sus entradas (selecciona). Intenta cargar choose.css después de 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>
Después de hacer esto, vea: El borde derecho del contador AddThis que falta con Twitter Bootstrap 3 . Parece que el selector universal de CSS para establecer el tamaño del cuadro en el cuadro de borde causó la mayor parte del problema.
Para solucionar este reinicio, ajuste el tamaño de la caja de los elementos que aplica elegido () en:
En el caso de $(''#select-input'').chosen(); también establecerás:
#select-input
{
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
NB por defecto, choose.js incluye una versión anterior de jQuery. Twitter Bootstrap (javascript) requiere la versión más reciente (<2) de jQuery
En realidad, hay alguien que creó un tema CSS de Bootstrap 3.0 para Elegido.
Algunas pantallas:
El tema está disponible en este número de Github Use Gist a continuación.
Editar
Creé un Fiddle usando el mismo HTML que la página de documentación oficial de Elegido con el tema de Bootstrap aplicado. (Se agregó form-control a todos los seleccionados y se eliminó style="width:350px;" )
Y también, voy a mantener el tema en esta esencia: https://gist.github.com/koenpunt/6424137
Si desea cambiar el tamaño de los cuadros de selección para que responda, puede usar:
[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;
}
También hay otro tema alternativo que admite Bootstrap 3 aquí https://github.com/dbtek/chosen-bootstrap .
Parece entradas nativas bs.