'x' for deselecting items in jquery chosen does not appear

Question

New to chosen I have come across a strange thing. Having a with multiple option selects. I have applied chosen to the list like this

$("#valgteSteder").chosen({
    no_results_text: "No results",
    placeholder_text_single: "-- choose --",
    disable_search: false
});

when I select one or more options I don't get the 'X' to right in the displayed item for deselect. I have tried to search for a solution to in the chosen doc's but to no avail. Any Idea of what I'm doing wrong or missing?

check `chosen.css` `search-choice-close` class and you should have this image `chosen-sprite.png` and it should be in correct path — Sridhar R, Jun 21 '14 at 06:39
Thanks Sridhar - You set me off in the right direction. :-) Problem was that the .png was not in the same folder as the CSS. Thanks - it works alright now — Bridgekeeper, Jun 21 '14 at 11:03

score 9 · Answer 1 · answered Jun 21 '14 at 11:54

9

Try this

Check chosen.css search-choice-close class and you should have this image chosen-sprite.png and it should be in correct path (folder)

answered Jun 21 '14 at 11:54

Sridhar R

20,190
6
38
35

score 2 · Answer 2 · answered Apr 25 '18 at 20:54

2

For me, everything was working in development, but the icons were not being found after I deployed my rails app to Heroku (odd). I changed all the url("chosen-sprite.png") references in my chosen.scss to image_url("chosen-sprite.png") and now all icons are being resolved properly.

answered Apr 25 '18 at 20:54

staxim

1,328
14
15

Sounds like you had this issue, which is specific to Rails: https://stackoverflow.com/questions/15257555/how-to-reference-images-in-css-within-rails-4 – ElliotSchmelliot Jul 06 '18 at 23:10

score 1 · Answer 3 · answered Jul 06 '18 at 23:07

Newer versions of Chosen have two images. Check that you have both of the following images in the correct location (by default, same file path as the chosen.css file):

chosen-sprite.png
chosen-sprite@2x.png

I had the first image but was missing the second.

score 1 · Answer 4 · answered Jun 19 '19 at 07:14

1

I had the same issue, however it wasn't a CSS problem. It turns out that the small 'x' to deselect only appears when you tell chosen to do that via an option:

$('.myelement').chosen({allow_single_deselect: true});

Full list of options

answered Jun 19 '19 at 07:14

jlh

4,349
40
45

'x' for deselecting items in jquery chosen does not appear

4 Answers4