Chosen.js styling not conforming to Bootstrap3 styles

Question

Im using chosen.js v1.0 and am using it in my project with Bootstrap 3 but the styles of my select boxes are not conforming to bootstrap 3 styles at all.

Am I doing anything wrong? I simply invoked the select boxes using
$('#select-input').chosen(); right?

enter image description here

Koen. · Accepted Answer · 2013-09-03T14:18:07.800

Actually, there is someone who created a Bootstrap 3.0 CSS theme for Chosen.

Some screens:

enter image description here

The theme is available in this Github issue Use Gist below.

Edit

I've created a Fiddle using the same HTML as the official Chosen documentation page with the Bootstrap theme applied. (added form-control to all selects and removed style="width:350px;")

And also, I'll be maintaining the theme in this gist: https://gist.github.com/koenpunt/6424137

Subtletree · Answer 2 · 2014-05-18T12:33:17.343

13

An alternate stylesheet for Chosen 1.0. This one is supposed to integrate better with Bootstrap 3.0.

Available here http://alxlit.github.io/bootstrap-chosen/

screenshot of chosen alternative

edited May 18 '14 at 12:33

answered Aug 28 '13 at 12:24

Subtletree

3,169
2
18
25

This is working a treat for me - also plays nicely with bower. – ptim Mar 28 '14 at 07:06

score 6 · Answer 3 · answered May 04 '14 at 10:13

6

There is also another alternate theme supports Bootstrap 3 here https://github.com/dbtek/chosen-bootstrap.

Looks like native bs inputs.

chosen-bootstrap

answered May 04 '14 at 10:13

dbtek

928
2
12
14

score 0 · Answer 4 · edited May 23 '17 at 12:00

Chosen.js (chosen.css) and the bootstrap css both add CSS styles to your inputs (selects). Try to load chose.css after 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>

After doing this see: Right border of the AddThis counter missing with Twitter's Bootstrap 3. It seems the CSS's universal selector to set box-sizing to border-box caused most of the trouble.

To fix this reset the box-sizing of the elements you apply chosen() on:

In the case of $('#select-input').chosen(); you will also set:

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

NB by default chosen.js bundles an old version of jQuery. Twitter Bootstrap (javascript) requires the newest version (<2) of jQuery

I have validated the chosen.min.css file is loaded **after** bootsrap.css and have applied the styles as prescribed. Still does not seem to resolve the issue. Im using jQuery 1.10.2 on the page — cyberjar09, Aug 22 '13 at 01:22
can you show an example of your code showing the problem? (i have test the above with the index.html delivered with chosen.js) — Bass Jobsen, Aug 22 '13 at 07:35

score 0 · Answer 5 · answered Feb 07 '15 at 07:24

If you want to change the select box sizes to be responsive you can use:

[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

Chosen.js styling not conforming to Bootstrap3 styles

5 Answers5

The theme is available in this Github issue Use Gist below.

Linked