There is missing styles for such states

• .has-warning
• .has-error
• .has-success

Is Bootstrap bug?

SyntaxError: No matching definition was found for `.calc-grid(0, xs, width)` in /home/zhuzx/work/bootstrap-chosen/bootstrap/less/grid.less:28:0
27 .make-grid-columns-float(xs);
28 .make-grid(@grid-columns, xs, width);
29 .make-grid(@grid-columns, xs, pull);

.calc-grid(@index, @class, @type) when (@type = width) and (@index > 0) {
.calc-grid(@index, @class, @type) when (@type = push) {
.calc-grid(@index, @class, @type) when (@type = pull) {
.calc-grid(@index, @class, @type) when (@type = offset) {

Hi, I would like to use your repo installing from bower and there is no versions found on it. Could you please release first version?
thanks.

The following is generated for the search-field:

For proper bootstrap layout, there need a class="form-control" in the input:

Also the search-icon is not perfectly aligned. The sprite need more padding between the icons. Perhaps the chosen framework can add this extra spaces.

I'm less-newbie, but I'm missing an import-statement. Something like

@import "bootstrap/variables.less";
@import "bootstrap/mixins.less";

Or does you refer your file from bootstrap.less. Would be great to get some information in the README.md

Hi,
I'm a member of cdnjs, and we receive a request to add this library into our service.
cdnjs/cdnjs#10398

Can you add bootstrap-chosen.css into git tag so that our bot can auto fetch this file.
Thank you for any help you can provide!

Hi,
When I try Bower update, I get this error

No versions found in git://github.com/alxlit/bootstrap-chosen.git

In my main Bower.JSON file for my app I have:

"bootstrap-chosen":"1.0.0",

The current font color is gray, but I'd like to change it to white. Maybe it's better to use @input-color instead?

.chosen-container-single {
.chosen-single {
color: @gray;
}
}

I directly download the code and run the Index filer but its missing css features and due to that bootstrap-choosen is also not working

Hi! Thank you for you work. Here my suggestions for LESS files (small improvements only). Please let me know what do you think. Also note that I'm using LESS Hat but we can use built-in mixins.

In bootstrap-chosen-variables.less

// Same border as Bootstrap form controls
@chosen-drop-border:  @input-border;

// Same focus color as Bootstrap form controls
@chosen-focus-border: @input-border-focus; 

// We really need different radius? I would say no for consistency :)
// Also why @chosen-multi-border-radius is 0 by default?
@chosen-multi-border-radius : @chosen-border-radius;

Improvements in bootstrap-chosen.less:

// Here we fix lighten(@chosen-drop-border, 25%)
// As you will end up to white when using
// @chosen-drop-border: @input-border;
.chosen-container .chosen-drop {
  border-top-color: @input-border;
}

// A Default select doesn't have a background-image in Bootstrap.
// Remove the background image.
.chosen-container-single {
  .chosen-single { background-image: none; }
}

// Fix pointer for this link without href attribute.
// In Chome, cursor is default for the "x" closing image
.chosen-container-multi .chosen-choices .search-choice .search-choice-close {
  cursor: pointer;
}

// Same background as Bootstrap, even when dropdown is show.
.chosen-container-active.chosen-with-drop .chosen-single {
  background: @input-bg;
}

// Border radius for single.
.chosen-container-single  {
  .chosen-single {
    .lh-border-radius(@chosen-border-radius);
  }

  &.chosen-with-drop .chosen-single {
    .lh-border-bottom-left-radius(0);
    .lh-border-bottom-right-radius(0);
  }
}

// Border radius for multiple.
.chosen-container-multi {
  .chosen-choices { .lh-border-radius(@chosen-multi-border-radius); }

  &.chosen-with-drop .chosen-choices {
    .lh-border-bottom-left-radius(0);
    .lh-border-bottom-right-radius(0);
  }
}

chosen-sprite.png ddoesn't work!

How to make it appear?

It would be nice to have a compiled and a minified css files as part of the library without bootstrap which would just override the chosen library. Kind of like how bootstrap has a compiled version with the default variables file.

Bootstrap 3 disabled inputs look like this:

http://getbootstrap.com/css/#forms-control-disabled

Bootstrap-chosen disabled state doesn't have the gray background - instead it looks like this (you can see this yourself by adding the .chosen-disabled class to the .chosen-container div):

Would love it if we could make these match up visually.

While compiling with less is in the read me, creating a distribution folder with the file, makes build automation must more strait forward. Why not crease a distribution folder ?

This would also aid in making a git hub project page.

When trying to compile the SASS stylesheets I get the error:

Undefined variable: "$chosen-border-color".

Does bootstrap-chosen-variables.scss not need something like

$chosen-border-color: $input-border-focus;

adding? At least, that's what fixed it for me.

Standard Select Not Working somthing wrong with updated bootstrap or jquery!

Hey folks,

First of all, thanks so much @alxlit for making our lifes a little easier the last 5 years. I'm so grateful for your time and effort put into this project.

With no sign of activity or revival, I forked this project to bootstrap4-chosen with the main goal of, well, Bootstrap 4 compat.

While most of the fork is working already (mostly switching out mixins and variables), there still needs to be some tuning, as you can see in the examples.

Any help and feedback is surely appreciated!

Have a nice day!

Hey,

thanks for this awesome chosen !

Currently is kind of weird to set focus on the component given that the internal structure is hidden and calling focus() on the control does not work.

After looking around the internals, found this way:

$(".chosen-search")[0].children[0].focus();

Am I missing something ?
Maybe we can add an initial focus property or some alternative mechanism ?

When we select an option from the list it gets removed. It would be better to disable it so it can't be selected again instead of removing it. It messes up list and makes it look ugly if using it with groups.

http://jsfiddle.net/pcarmoni/Szvw6/15/

you should really have a default css file (with defaults from bootstrap)

I realise that posting here purely as a result of my ignorance must be really irritating, so forgive me, but I've spent hours on this already and I'm getting nowhere.

Before today I didn't really understand SASS or LESS. So, having decided to use SASS instead of LESS, I have downloaded Koala, a LESS and SASS compiler, downloaded the bootstrap-chosen.scss and bootstrap-chosen-variables.scss files from this repository and tried to compile them. I get an error about an undefined variable ($input-bg).

So, I've gone to the Bootstrap site, downloaded their .scss source files, and added _mixins.scss and _variables.scss into Koala too. Still I get the error.

I created my own .scss file in the same folder, which simply has an @import statement for each of the four downloaded .scss files. Still the error is thrown.

Given that I'm completely ignorant of how to compile SASS files, am not quite sure what I'm doing, don't quite understand the instruction "Just keep in mind that it needs access to variables.less and mixins.less." and am used to just working with pre-complied .css files... how can I simply get to the point where I have a .css file I can drop into my MVC5 project which will style Chosen controls to look like Bootstrap controls?

Would it be too onerous to include a pre-compiled .css file in the repository for people like me? What might I be doing wrong in trying to do this compiling myself?

Thanks!

I am curious if anyone has been able to get the border radius to match on these boxes? Bootstrap has a border radius on most inputs, but i cannot get the chosen input box to use a similar border radius...

screenshot taken from http://alxlit.github.io/bootstrap-chosen/

whe inserting the Multiple Select into the data base or getting the data from the select is pretty good but
when i am using it for updating the priviouse list
i got problem in setting the previously updated data as the default text of Multiple Select

any help can be appreciated

thanks in advance

The final line in bootstrap-chosen.css references a source map that's not checked in.

/*# sourceMappingURL=bootstrap-chosen.css.map */

bootstrap-chosen not working on mobile devicecs the css styles not applying to choosen when it is viewed in mobile devices.

How to install this package using bower? I tried but files not downloading. Only folder created but inside folder no files presented.

Version 1.8.3 introduces some changes to how the input field is rendered, which breaks the styling. Single element only.

When I put a chosen-selectbox (span4) in a row and in the next row another element (e.g a button inside span4), both have different sizes. which is fine and could be solved by putting style="width: 100%;" for the chosen-selectbox.

THe problem occurs when I try the responsive features. Resizing the website-window leads to adjustments of all the elements except for the select-box.

The element to clear a single select (.chosen-container-single .chosen-single abbr) should have the css property cursor:pointer to show that it is an interactive element.
Currently, it inherits cursor:text from the parent <a> element.

Hi,

I have been trying to use one of you previous commits to get this to display properly with bootstrap 2.3.2 with little success.

Can you help me out please?
Cheers,

I was practicing ajax and decided to do a demo. I notice problem the actual html select jquery is not working after integrating chosen bootstrap.
<form:select id="country" path="country" data-placeholder="Choose a Country" class="chosen-select">
<form:options items="${countryNames}" />

I loaded my country select combo dynamically, I wanted to load cities based on country selection

in ajax, I used
$('#country').change(function(){
alert("cities changed!!!");
});

I further tried it with changing the id to
$('#country_chosen').change(function(){
alert("cities changed!!!");
});

yet not working.

The height of the input is not adjusted with the input-lg class

when i put static non-Eng text into "option", it's no issues
But when i put dynamic text which came from loop, it's a issue with non-English language

code write in c sharp

• @StaffBranchName represent my text (non-Eng)

Image1 source code
Image2 view result

from image 2, some options are missing

Is it possible to make separate CSS file file without needs to have bootstrap sources and glue them?

Use case example: Bootstrap is located on CDN.

Problem solved just by adding this:
.chosen-container.chosen-rtl .chosen-drop { right: -9000px; left: auto; }
at line 26 of the bootstrap-chosen.css

It'd be nice to figure out a way to generate the SCSS files from Less, seems like sed could do it.

I want to clear the another select data when i change the previous select option

thanks

Hi,
my dropdown items have two attributes,one is value and another is custom attribute "numeric". like shown below.

Hi,

In bootstrap-chosen.less, just above @media please add this fix:

.input-group-lg  .chosen-single {
    .input-lg();
}
.input-group-sm  .chosen-single {
    .input-sm();
}

In order to make CSS work with small and large input groups.

Regards.

You forgot to include bootstrap-chosen.css in example page

I'm using .chosen-xlarge and the width is different in the menu that drops down. (I think it stays the original size).

//not found el search not Working

I use bower to install bootstrap-chosen

bower install bootstrap-chosen

lessc bootstrap-chosen.less > bootstrap-chosen.css

NameError: variable @input-bg is undefined in bootstrap-chosen-variables.less
 on line 10, column 21:
9
10 @chosen-background: @input-bg
11 @chosen-border: 1px solid @input-border

see http://jsfiddle.net/dnozay/Rfv6t/5/

I am trying to get a multi-select in the navbar. but I cannot get it to look right; I am not a css expert and only spent half a day at it. My goal is to make a filter bar with a button input-group where the button gets resized if you have more filters.

button doesn't get resized and doesn't really look like an input-group.

i've looked at some other stuff (posted here for reference)
http://akrabat.com/software/styling-a-chosen-select-to-fit-bootstrap-3-better/
http://stackoverflow.com/questions/18355026/chosen-js-styling-not-conforming-to-bootstrap3-styles
https://gist.github.com/koenpunt/6424137 (tried with and without padding)

The .help-inline-block is still much lower than the the combox.

            <div class="control-group error " 
                    id="comboBox_field">
                <label class="control-label" for="comboBox">Label4comboBox:</label>
                <div class="controls">
                    <select id="comboBoxId" name="comboBox"  class = "chzn-select"><option value="z" >Letzter Buchstabe</option>
                    <option value="a" >Anfangsbuchstabe</option>
                    <option value="b" selected>Zweiter Buchstabe</option>
                    </select>
                    <span class="help-inline">First error, Second error</span>
                    <span class="help-block">First info, Second info</span>
                </div>
            </div>

Is this is a problem of a wrong version or is it not the target of you solution?