New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chosen-sprite.png not displayed for multiple select #291

Closed
nevf opened this Issue Oct 7, 2011 · 17 comments

Comments

Projects
None yet
@nevf

nevf commented Oct 7, 2011

I've just noticed that the chosen-sprite.png (drop-down arrow) is not displayed for multiple select and the select styling also differs from the single select. It seems to me that the user would better identify multiple selects if they included the drop-down arrow.

Is this not included for a specific reason and if not I'd like to see it included in a future update if possible.

Many thanks for developing this very nice plugin.

-Neville, http://www.surfulater.com

@NHQ

This comment has been minimized.

Show comment
Hide comment
@NHQ

NHQ Oct 28, 2011

I've been trying to hack the css to show the arrows for muli select, without success. The backgrounds are complex! Any guidance on how to make this hack would be appreciated.

thx

NHQ commented Oct 28, 2011

I've been trying to hack the css to show the arrows for muli select, without success. The backgrounds are complex! Any guidance on how to make this hack would be appreciated.

thx

@urbanczykd

This comment has been minimized.

Show comment
Hide comment
@urbanczykd

urbanczykd Dec 1, 2011

i have the same problem css look good but chosen-prite is not displayed :/

i have the same problem css look good but chosen-prite is not displayed :/

@urbanczykd

This comment has been minimized.

Show comment
Hide comment
@urbanczykd

urbanczykd Dec 1, 2011

i get solution :) download css and this png from site not from repo

i get solution :) download css and this png from site not from repo

@urbanczykd

This comment has been minimized.

Show comment
Hide comment
@urbanczykd

urbanczykd Dec 1, 2011

and find in css height: 13px; and change to height: 11px; now is look ok form me of course :)

and find in css height: 13px; and change to height: 11px; now is look ok form me of course :)

@pfiller

This comment has been minimized.

Show comment
Hide comment
@pfiller

pfiller Apr 24, 2013

Contributor

I cannot recreate this problem. If you're still having this issue, please create a fiddle showing the problem in action and re-open. Thanks.

Contributor

pfiller commented Apr 24, 2013

I cannot recreate this problem. If you're still having this issue, please create a fiddle showing the problem in action and re-open. Thanks.

@pfiller pfiller closed this Apr 24, 2013

@slothbear

This comment has been minimized.

Show comment
Hide comment
@slothbear

slothbear May 22, 2013

Contributor

I'm seeing the missing arrow problem. @pfiller, is this the same as the problem you could not recreate? In my app, I have a single select and a multiple select right next to each other. My customer is complaining that people won't know the multiple-select is a menu without the drop-down arrow. They'll figure out quickly enough when they click in the field – unless they don't think to. Here is a fiddle that displays the problem: http://jsfiddle.net/slothbear/xPy2G/1/

screenshot_5_22_13_5_58_pm-2

Contributor

slothbear commented May 22, 2013

I'm seeing the missing arrow problem. @pfiller, is this the same as the problem you could not recreate? In my app, I have a single select and a multiple select right next to each other. My customer is complaining that people won't know the multiple-select is a menu without the drop-down arrow. They'll figure out quickly enough when they click in the field – unless they don't think to. Here is a fiddle that displays the problem: http://jsfiddle.net/slothbear/xPy2G/1/

screenshot_5_22_13_5_58_pm-2

@ajmichels

This comment has been minimized.

Show comment
Hide comment
@ajmichels

ajmichels Aug 12, 2013

I am also running into this. The only issue our QA staff have with the form we created is that the multi-select inputs do not have the arrow. Hacking the CSS isn't really a good solution alone as you really need an element anchored to the right side of the container to make sure the input can scale, which is how it is done in the single select inputs.

chosen-muliselect-dropdown

It would be nice if there was at least an option to enable it or an event/callback that fired after the plugin is initialized that we could hook into and add any extra HTML that we might need.

I am also running into this. The only issue our QA staff have with the form we created is that the multi-select inputs do not have the arrow. Hacking the CSS isn't really a good solution alone as you really need an element anchored to the right side of the container to make sure the input can scale, which is how it is done in the single select inputs.

chosen-muliselect-dropdown

It would be nice if there was at least an option to enable it or an event/callback that fired after the plugin is initialized that we could hook into and add any extra HTML that we might need.

@patawa91

This comment has been minimized.

Show comment
Hide comment
@patawa91

patawa91 Aug 21, 2015

Is having the arrow on multi select something that could possibly be pulled in if it was implemented cleanly? Is it in the spirit of the project? I am considering submitting a pull request. Thanks

Is having the arrow on multi select something that could possibly be pulled in if it was implemented cleanly? Is it in the spirit of the project? I am considering submitting a pull request. Thanks

@tjschuck

This comment has been minimized.

Show comment
Hide comment
@tjschuck

tjschuck Aug 21, 2015

Member

I don't know what @pfiller is talking about -- the down arrow is definitely not included on multiselects. You can see it on http://harvesthq.github.io/chosen/

Reopening, and pinging @mlettini

Member

tjschuck commented Aug 21, 2015

I don't know what @pfiller is talking about -- the down arrow is definitely not included on multiselects. You can see it on http://harvesthq.github.io/chosen/

Reopening, and pinging @mlettini

@patawa91

This comment has been minimized.

Show comment
Hide comment
@patawa91

patawa91 Aug 21, 2015

@tjschuck do you know if there is a fork or pull request where someone has attempted this. I implemented it for another project, and I'm considering submitting a pull request. I'd like to look how someone else has done it

@tjschuck do you know if there is a fork or pull request where someone has attempted this. I implemented it for another project, and I'm considering submitting a pull request. I'd like to look how someone else has done it

@mlettini

This comment has been minimized.

Show comment
Hide comment
@mlettini

mlettini Aug 21, 2015

Member

The down arrow was never included on the multi-select. It was designed to look like an input with an autocomplete feature, not a select box you can scroll through (even though it has that functionality).

There is no bug/issue here, just a feature request. If someone was to open a PR for it, it should be optional.

Member

mlettini commented Aug 21, 2015

The down arrow was never included on the multi-select. It was designed to look like an input with an autocomplete feature, not a select box you can scroll through (even though it has that functionality).

There is no bug/issue here, just a feature request. If someone was to open a PR for it, it should be optional.

@mrguruo

This comment has been minimized.

Show comment
Hide comment
@mrguruo

mrguruo Dec 11, 2015

+1 request for this feature

mrguruo commented Dec 11, 2015

+1 request for this feature

@pfiller

This comment has been minimized.

Show comment
Hide comment
@pfiller

pfiller Jun 3, 2016

Contributor

Ok, so @mlettini says they're designed to look different and I'm ok with that. They should look different!

Closing.

Contributor

pfiller commented Jun 3, 2016

Ok, so @mlettini says they're designed to look different and I'm ok with that. They should look different!

Closing.

@MarcusSilvaBH

This comment has been minimized.

Show comment
Hide comment
@MarcusSilvaBH

MarcusSilvaBH Oct 28, 2016

I'm having trouble to display the arrows and the magnifying glass even in single select!
Why?
`

<title>Teste chosen</title>


<script type="text/javascript" src="js/jquery3.js"></script>
<script type="text/javascript" src="js/chosen.jquery.js"></script>
<script>
$(function() {
$(".chosen-select").chosen({
disable_search_threshold: 0,
no_results_text: "Nada encontrado!",
allow_single_deselect: true
});
});
</script>

` ....... ` United States United Kingdom Afghanistan Albania Algeria ` .........

The arrows and the magnifying glass doesn't show!

MarcusSilvaBH commented Oct 28, 2016

I'm having trouble to display the arrows and the magnifying glass even in single select!
Why?
`

<title>Teste chosen</title>


<script type="text/javascript" src="js/jquery3.js"></script>
<script type="text/javascript" src="js/chosen.jquery.js"></script>
<script>
$(function() {
$(".chosen-select").chosen({
disable_search_threshold: 0,
no_results_text: "Nada encontrado!",
allow_single_deselect: true
});
});
</script>

` ....... ` United States United Kingdom Afghanistan Albania Algeria ` .........

The arrows and the magnifying glass doesn't show!

@tslatt

This comment has been minimized.

Show comment
Hide comment
@tslatt

tslatt Oct 18, 2017

My client also wants an arrow on the multi-select. With so many people wanting this and it still being asked for 6 years after the first request, can't it be an optional feature? Or, could one of you guys who implemented it yourself please post your code for everyone else who needs this?

tslatt commented Oct 18, 2017

My client also wants an arrow on the multi-select. With so many people wanting this and it still being asked for 6 years after the first request, can't it be an optional feature? Or, could one of you guys who implemented it yourself please post your code for everyone else who needs this?

@Farnam88

This comment has been minimized.

Show comment
Hide comment
@DanKing123

This comment has been minimized.

Show comment
Hide comment
@DanKing123

DanKing123 May 9, 2018

I'm having the same problem. I don't understand why you wouldn't make the arrow optional at least, since it's a thing that so many people want and it makes it much more obvious and easier to use.

I have a solution here for anyone who needs it, but it's very hacky I'm afraid!

CSS:

.chosen-container-multi ul.chosen-choices:after {
    content: '';
    background-image: url(chosen-sprite.png);
    background-position-x: 0px;
    background-position-y: 2px;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 18px;
    height: 25px;
    cursor: pointer;
}

.chosen-container-multi.chosen-with-drop ul.chosen-choices:after {
    background-position-x: -18px;
}

The above will make the arrow appear in the correct orientation depending on whether the drop list is open or closed.

The tricky part is making it clickable in order to close the drop list. This is where it got really hacky I'm afraid:

// chosenify your drop list (mine is called "myMultiSelect") and then:

// Need to register a handler to fire *before* Chosen's mousedown event, and detect the current
// state of the drop down plus whether the arrow has been clicked. Then set a flag accordingly.
var downArrowClicked;
$("#myMultiSelect_chosen").mousedown(function(e) {
    var elem = $(this);
    // Note that this depends on the width of the arrow (18 pixels) defined in the CSS above
    downArrowClicked
        = elem.hasClass('chosen-with-drop') && e.pageX >= elem.position().left + elem.width() - 18;
});
// Need to hack jQuery (I'm using 1.10.2) to get in before Chosen's event handler - NOTE: this may
// break in later jQuery versions!
var mousedownHandlers = $._data($("#myMultiSelect_chosen").get(0), 'events').mousedown;
mousedownHandlers.splice(0, 0, mousedownHandlers.pop());

// Close the dropdown (if needed) from the click handler (if we do it earlier than this, it will
// interfere with other Chosen functionality).
$("#myMultiSelect_chosen").click(function() {
    if (downArrowClicked) {
        // Use timeout to ensure all other current processing has completed before closing the
        // dropdown - without this it doesn't work in IE/Edge
        setTimeout(function() { $("#myMultiSelect").trigger('chosen:close'); });
    }
});

Caveat: THIS MAY BREAK WITH FUTURE RELEASES OF CHOSEN OR JQUERY!!

DanKing123 commented May 9, 2018

I'm having the same problem. I don't understand why you wouldn't make the arrow optional at least, since it's a thing that so many people want and it makes it much more obvious and easier to use.

I have a solution here for anyone who needs it, but it's very hacky I'm afraid!

CSS:

.chosen-container-multi ul.chosen-choices:after {
    content: '';
    background-image: url(chosen-sprite.png);
    background-position-x: 0px;
    background-position-y: 2px;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 18px;
    height: 25px;
    cursor: pointer;
}

.chosen-container-multi.chosen-with-drop ul.chosen-choices:after {
    background-position-x: -18px;
}

The above will make the arrow appear in the correct orientation depending on whether the drop list is open or closed.

The tricky part is making it clickable in order to close the drop list. This is where it got really hacky I'm afraid:

// chosenify your drop list (mine is called "myMultiSelect") and then:

// Need to register a handler to fire *before* Chosen's mousedown event, and detect the current
// state of the drop down plus whether the arrow has been clicked. Then set a flag accordingly.
var downArrowClicked;
$("#myMultiSelect_chosen").mousedown(function(e) {
    var elem = $(this);
    // Note that this depends on the width of the arrow (18 pixels) defined in the CSS above
    downArrowClicked
        = elem.hasClass('chosen-with-drop') && e.pageX >= elem.position().left + elem.width() - 18;
});
// Need to hack jQuery (I'm using 1.10.2) to get in before Chosen's event handler - NOTE: this may
// break in later jQuery versions!
var mousedownHandlers = $._data($("#myMultiSelect_chosen").get(0), 'events').mousedown;
mousedownHandlers.splice(0, 0, mousedownHandlers.pop());

// Close the dropdown (if needed) from the click handler (if we do it earlier than this, it will
// interfere with other Chosen functionality).
$("#myMultiSelect_chosen").click(function() {
    if (downArrowClicked) {
        // Use timeout to ensure all other current processing has completed before closing the
        // dropdown - without this it doesn't work in IE/Edge
        setTimeout(function() { $("#myMultiSelect").trigger('chosen:close'); });
    }
});

Caveat: THIS MAY BREAK WITH FUTURE RELEASES OF CHOSEN OR JQUERY!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment