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

if select is initially hidden, doesn't work #92

Open
iamnader opened this Issue Jul 27, 2011 · 119 comments

Comments

Projects
None yet
@iamnader

iamnader commented Jul 27, 2011

This is because when setting the width it will return 0. Using this technique works: http://www.foliotek.com/devblog/getting-the-width-of-a-hidden-element-with-jquery-using-width/

The code should check if the elmt.is(:visible) and if so use the above technique. I'm happy to fix in a fork. @hat is the procedure? Just patch the coffeescript? How do you generate js and js min?

@reconbot

This comment has been minimized.

Show comment
Hide comment
@reconbot

reconbot Jul 28, 2011

Yes you should patch the coffee script. Also I'm for the ability to setup hidden elements.

reconbot commented Jul 28, 2011

Yes you should patch the coffee script. Also I'm for the ability to setup hidden elements.

@obie

This comment has been minimized.

Show comment
Hide comment
@obie

obie Jul 28, 2011

+1 ran into this issue today

obie commented Jul 28, 2011

+1 ran into this issue today

@techpeace

This comment has been minimized.

Show comment
Hide comment
@techpeace

techpeace Jul 28, 2011

+1 as did I

As a workaround, you can set the width of the created div with an !important flag:

#my_select_chzn {
  width: 100% !important;
}

techpeace commented Jul 28, 2011

+1 as did I

As a workaround, you can set the width of the created div with an !important flag:

#my_select_chzn {
  width: 100% !important;
}
@techpeace

This comment has been minimized.

Show comment
Hide comment
@techpeace

techpeace Jul 28, 2011

Actually, this will get you closer to where you need to be. The widths aren't perfect, but everything will be visible.

#my_select_chzn {
  /* This is the only width setting you'll need to change. */
  width: 100% !important;
}
#my_select_chzn .chzn-drop {
  width: 100% !important;
}
#my_select_chzn .chzn-drop .chzn-search {
  width: 99% !important;
}
#web_template_exploit_name_chzn .chzn-drop .chzn-search input {
  width: 98% !important;
}

techpeace commented Jul 28, 2011

Actually, this will get you closer to where you need to be. The widths aren't perfect, but everything will be visible.

#my_select_chzn {
  /* This is the only width setting you'll need to change. */
  width: 100% !important;
}
#my_select_chzn .chzn-drop {
  width: 100% !important;
}
#my_select_chzn .chzn-drop .chzn-search {
  width: 99% !important;
}
#web_template_exploit_name_chzn .chzn-drop .chzn-search input {
  width: 98% !important;
}
@pfiller

This comment has been minimized.

Show comment
Hide comment
@pfiller

pfiller Jul 28, 2011

Contributor

An earlier version of Chosen actually tested to see if the form field width was set via css. If so, it didn't use the width calculation. I think I prefer this method of fix to adding 30 lines of code for testing hidden elements. Would something like this work for you?

Set the width:

  <select style="width:350px;" class="chzn-select">

JS tests for set width first:

  @f_width = if @form_field_jq.css('width')? then parseInt(@form_field_jq.css('width'),10) else @form_field_jq.width()
Contributor

pfiller commented Jul 28, 2011

An earlier version of Chosen actually tested to see if the form field width was set via css. If so, it didn't use the width calculation. I think I prefer this method of fix to adding 30 lines of code for testing hidden elements. Would something like this work for you?

Set the width:

  <select style="width:350px;" class="chzn-select">

JS tests for set width first:

  @f_width = if @form_field_jq.css('width')? then parseInt(@form_field_jq.css('width'),10) else @form_field_jq.width()
@aziz

This comment has been minimized.

Show comment
Hide comment
@aziz

aziz Jul 28, 2011

Contributor

@pfiller there's a small bug in your code. If the inline style has a width in any unit other than pixels (like em) the code will interprete it as pixels. see line 56 in chosen.jquery.coffee

I think people will continuously complain about it and you'll ultimately need to add that 30 lines of code.

Contributor

aziz commented Jul 28, 2011

@pfiller there's a small bug in your code. If the inline style has a width in any unit other than pixels (like em) the code will interprete it as pixels. see line 56 in chosen.jquery.coffee

I think people will continuously complain about it and you'll ultimately need to add that 30 lines of code.

@iamnader

This comment has been minimized.

Show comment
Hide comment
@iamnader

iamnader Jul 28, 2011

Hi @pfiller, that doesn't work. Both width() and css("width") return 0 for hidden elements. I'm using the getHiddenDimensions technique and it's working well.

btw, you need to use it both for f_width and also in get_side_border_padding

iamnader commented Jul 28, 2011

Hi @pfiller, that doesn't work. Both width() and css("width") return 0 for hidden elements. I'm using the getHiddenDimensions technique and it's working well.

btw, you need to use it both for f_width and also in get_side_border_padding

@enhughesiasm

This comment has been minimized.

Show comment
Hide comment
@enhughesiasm

enhughesiasm Aug 1, 2011

+1 for this.

A lot of the logic on the site I'm integrating Chosen on relies on some selects being hidden on first load, so we get all kinds of problems with this.

enhughesiasm commented Aug 1, 2011

+1 for this.

A lot of the logic on the site I'm integrating Chosen on relies on some selects being hidden on first load, so we get all kinds of problems with this.

@v15h

This comment has been minimized.

Show comment
Hide comment
@v15h

v15h Aug 1, 2011

+1 as well. Visibility checks should be built in.

v15h commented Aug 1, 2011

+1 as well. Visibility checks should be built in.

@aziz

This comment has been minimized.

Show comment
Hide comment
@aziz

aziz Aug 1, 2011

Contributor

👍 👍 👍

Contributor

aziz commented Aug 1, 2011

👍 👍 👍

@AndrewRayCode

This comment has been minimized.

Show comment
Hide comment
@AndrewRayCode

AndrewRayCode Aug 2, 2011

What about the solution where the dropdown width isn't set permanently on first startup, and is just resized to the width of the textbox when it opens? That way you don't have to ever touch the width of the input, just assume it's set with css and read it every time you open the dropdown.

AndrewRayCode commented Aug 2, 2011

What about the solution where the dropdown width isn't set permanently on first startup, and is just resized to the width of the textbox when it opens? That way you don't have to ever touch the width of the input, just assume it's set with css and read it every time you open the dropdown.

@johndwells

This comment has been minimized.

Show comment
Hide comment
@johndwells

johndwells Aug 2, 2011

+1 for this. I've decided to turn Chosen into a fieldtype for the ExpressionEngine CMS, but the publish layouts of EE allows for fields to be hidden on page load.

I'm not sure if this is related, but in the case of EE it would be best if the width were fluid, or simply was always 100% of its containing element...

johndwells commented Aug 2, 2011

+1 for this. I've decided to turn Chosen into a fieldtype for the ExpressionEngine CMS, but the publish layouts of EE allows for fields to be hidden on page load.

I'm not sure if this is related, but in the case of EE it would be best if the width were fluid, or simply was always 100% of its containing element...

AndrewRayCode pushed a commit to AndrewRayCode/chosen-hacks that referenced this issue Aug 5, 2011

@vespakoen

This comment has been minimized.

Show comment
Hide comment
@AlexMC

This comment has been minimized.

Show comment
Hide comment
@AlexMC

AlexMC Oct 10, 2011

Bumped into this one... it's still happening in the latest version

AlexMC commented Oct 10, 2011

Bumped into this one... it's still happening in the latest version

@joesondow

This comment has been minimized.

Show comment
Hide comment
@joesondow

joesondow Oct 12, 2011

+1
This bug is blocking usage of the Chosen plugin for internal apps at Netflix

joesondow commented Oct 12, 2011

+1
This bug is blocking usage of the Chosen plugin for internal apps at Netflix

@DarkPreacher

This comment has been minimized.

Show comment
Hide comment
@DarkPreacher

DarkPreacher Oct 19, 2011

👍 on this issue, ran into this problem today

DarkPreacher commented Oct 19, 2011

👍 on this issue, ran into this problem today

@vespakoen

This comment has been minimized.

Show comment
Hide comment
@vespakoen

vespakoen Oct 19, 2011

You can hide your content with: position: absolute; left: -999em;
This way, screen readers and Google can "read" them too, and your Chosen dropdown WILL be visible when showing it again.

vespakoen commented Oct 19, 2011

You can hide your content with: position: absolute; left: -999em;
This way, screen readers and Google can "read" them too, and your Chosen dropdown WILL be visible when showing it again.

@AndrewRayCode

This comment has been minimized.

Show comment
Hide comment
@AndrewRayCode

AndrewRayCode Oct 20, 2011

My pull request fixes this issue, but like my other one and many of the ones for chosen they are being ignored. This project has too many contributors with too small of a code base.

AndrewRayCode commented Oct 20, 2011

My pull request fixes this issue, but like my other one and many of the ones for chosen they are being ignored. This project has too many contributors with too small of a code base.

@bewest

This comment has been minimized.

Show comment
Hide comment
@bewest

bewest Oct 21, 2011

DelvarWorld, thanks for your patch. This has been bugging me, and I was just about to implement a similar solution and thought I'd double check to see if anyone had already done so.

I'll be deploying this to production code shortly after I test it.

bewest commented Oct 21, 2011

DelvarWorld, thanks for your patch. This has been bugging me, and I was just about to implement a similar solution and thought I'd double check to see if anyone had already done so.

I'll be deploying this to production code shortly after I test it.

@pfiller

This comment has been minimized.

Show comment
Hide comment
@pfiller

pfiller Oct 21, 2011

Contributor

@delvarworld what pull request are you referring to? I see one open pull request from you and it does not address this issue.

Contributor

pfiller commented Oct 21, 2011

@delvarworld what pull request are you referring to? I see one open pull request from you and it does not address this issue.

@AndrewRayCode

This comment has been minimized.

Show comment
Hide comment
@AndrewRayCode

AndrewRayCode Oct 21, 2011

@pfiller The one listed above in this thread, AndrewRayCode@e950156

AndrewRayCode commented Oct 21, 2011

@pfiller The one listed above in this thread, AndrewRayCode@e950156

@bewest

This comment has been minimized.

Show comment
Hide comment
@bewest

bewest Oct 21, 2011

More important than using the css is using the "current" width of the element when rendering the results, instead of using an incorrectly cached width from the construction of Chosen.

There have been many changes, and I'm not quite sure of the best way to merge them myself. Will you have a merged version shortly?

bewest commented Oct 21, 2011

More important than using the css is using the "current" width of the element when rendering the results, instead of using an incorrectly cached width from the construction of Chosen.

There have been many changes, and I'm not quite sure of the best way to merge them myself. Will you have a merged version shortly?

@AndrewRayCode

This comment has been minimized.

Show comment
Hide comment
@AndrewRayCode

AndrewRayCode Oct 22, 2011

@bewest my pull request does that, every time the dropdown is shown it matches the width of the element

AndrewRayCode commented Oct 22, 2011

@bewest my pull request does that, every time the dropdown is shown it matches the width of the element

@bewest

This comment has been minimized.

Show comment
Hide comment
@bewest

bewest Oct 22, 2011

@delvarworld I know, just making sure the right distinction is made.

Can you try bringing your auto-width branch up to date with HEAD? I tried merging from a similar checkout around the end of August, but the input box is now the wrong width (it is too wide, overflowing the width of chosen's container).

I'm taking a look, but there's also been some re-organization... the constructor has been removed in favor of a setup and finish_setup methods. I'm also not familiar with coffeescript so your progress in merging might be faster than mine and submitting a pull request my help, since there seems to be a lot of interest in this issue.

bewest commented Oct 22, 2011

@delvarworld I know, just making sure the right distinction is made.

Can you try bringing your auto-width branch up to date with HEAD? I tried merging from a similar checkout around the end of August, but the input box is now the wrong width (it is too wide, overflowing the width of chosen's container).

I'm taking a look, but there's also been some re-organization... the constructor has been removed in favor of a setup and finish_setup methods. I'm also not familiar with coffeescript so your progress in merging might be faster than mine and submitting a pull request my help, since there seems to be a lot of interest in this issue.

@AndrewRayCode

This comment has been minimized.

Show comment
Hide comment
@AndrewRayCode

AndrewRayCode Oct 22, 2011

Actually, my branch has diverged past just that change, and eventually I gave up working on the prototype version. My fault, and I think at this point it's not mergeable.

AndrewRayCode commented Oct 22, 2011

Actually, my branch has diverged past just that change, and eventually I gave up working on the prototype version. My fault, and I think at this point it's not mergeable.

@bewest

This comment has been minimized.

Show comment
Hide comment
@bewest

bewest Oct 22, 2011

@DevarWorld Yeah, it needs to be reworked a bit so that some bits go in the Abstract implementation. This should make it easier to maintain the differences between prototype and jquery.

Would you be willing to give it another go?

bewest commented Oct 22, 2011

@DevarWorld Yeah, it needs to be reworked a bit so that some bits go in the Abstract implementation. This should make it easier to maintain the differences between prototype and jquery.

Would you be willing to give it another go?

@RoyJacobs

This comment has been minimized.

Show comment
Hide comment
@RoyJacobs

RoyJacobs Nov 11, 2011

A polite bump...is anyone working on this?

RoyJacobs commented Nov 11, 2011

A polite bump...is anyone working on this?

@kevinelliott

This comment has been minimized.

Show comment
Hide comment
@kevinelliott

kevinelliott Nov 16, 2011

Chosen doesn't work for me since it's hiding my select, and then unable to calculate the width. I have to hack it by arbitrarily setting a width on each of the chzn components in CSS. This does not seem like how this is suppose to work, and it really doesn't even look normal like it does on the websites I've seen it on.

kevinelliott commented Nov 16, 2011

Chosen doesn't work for me since it's hiding my select, and then unable to calculate the width. I have to hack it by arbitrarily setting a width on each of the chzn components in CSS. This does not seem like how this is suppose to work, and it really doesn't even look normal like it does on the websites I've seen it on.

@RichardBlair

This comment has been minimized.

Show comment
Hide comment
@RichardBlair

RichardBlair Nov 16, 2011

I also ran into this problem. As it turns out, the method that chosen uses to get the width of an element is broken in earlier version of jquery (I'm sorry, but I don't have the exact version numbers). As noted above, the bug was when an element is not visible the width would return 0. This bug is very well documented, and there are many ways around it.

The solution for us was to simply upgrade to the newest version of Jquery. Yes, we had to do some patching and testing of old code that used jquery, but in the long run it fixes a lot of issues and reduces the need for little hacks throughout your js/css.

RichardBlair commented Nov 16, 2011

I also ran into this problem. As it turns out, the method that chosen uses to get the width of an element is broken in earlier version of jquery (I'm sorry, but I don't have the exact version numbers). As noted above, the bug was when an element is not visible the width would return 0. This bug is very well documented, and there are many ways around it.

The solution for us was to simply upgrade to the newest version of Jquery. Yes, we had to do some patching and testing of old code that used jquery, but in the long run it fixes a lot of issues and reduces the need for little hacks throughout your js/css.

@kevinelliott

This comment has been minimized.

Show comment
Hide comment
@kevinelliott

kevinelliott Nov 16, 2011

I am installing the latest jquery that is packaged in the rails jquery gem and jquery-ujs. I suppose this is still too old?

kevinelliott commented Nov 16, 2011

I am installing the latest jquery that is packaged in the rails jquery gem and jquery-ujs. I suppose this is still too old?

@RoyJacobs

This comment has been minimized.

Show comment
Hide comment
@RoyJacobs

RoyJacobs Nov 16, 2011

Yes, an actual version number would be nice to have. I can confirm 1.6.2 is
too old as well.

On Wed, Nov 16, 2011 at 11:23, Kevin Elliott <
reply@reply.github.com

wrote:

I am installing the latest jquery that is packaged in the rails jquery gem
and jquery-ujs. I suppose this is still too old?

RoyJacobs commented Nov 16, 2011

Yes, an actual version number would be nice to have. I can confirm 1.6.2 is
too old as well.

On Wed, Nov 16, 2011 at 11:23, Kevin Elliott <
reply@reply.github.com

wrote:

I am installing the latest jquery that is packaged in the rails jquery gem
and jquery-ujs. I suppose this is still too old?

@stof

This comment has been minimized.

Show comment
Hide comment
@stof

stof Nov 16, 2011

Collaborator

@RoyJacobs newest currently is 1.7 as it has been released.

Collaborator

stof commented Nov 16, 2011

@RoyJacobs newest currently is 1.7 as it has been released.

@RichardBlair

This comment has been minimized.

Show comment
Hide comment
@RichardBlair

RichardBlair Nov 16, 2011

@RoyJacobs I can confirm that we are using 1.6.4 without issue.

RichardBlair commented Nov 16, 2011

@RoyJacobs I can confirm that we are using 1.6.4 without issue.

@kevinelliott

This comment has been minimized.

Show comment
Hide comment
@kevinelliott

kevinelliott Nov 18, 2011

This is strange. Yeah the jquery-rails gem is using jQuery 1.7. But it's still not working for me.

You can see that it is not rendering with a width. Inspection shows all the calculated widths to be 0px. This occurs even if I set .chzn-select to have a width in CSS or directly in the style parameter of the select tag.

https://skitch.com/kevinelliott/gjufg/winetribe
https://skitch.com/kevinelliott/gjufp/winetribe

Certainly annoying. The select seems to be getting display:none (I assume from the chosen javascript), and I can only imagine that it's then not able to calculate the width properly.

Thoughts?

kevinelliott commented Nov 18, 2011

This is strange. Yeah the jquery-rails gem is using jQuery 1.7. But it's still not working for me.

You can see that it is not rendering with a width. Inspection shows all the calculated widths to be 0px. This occurs even if I set .chzn-select to have a width in CSS or directly in the style parameter of the select tag.

https://skitch.com/kevinelliott/gjufg/winetribe
https://skitch.com/kevinelliott/gjufp/winetribe

Certainly annoying. The select seems to be getting display:none (I assume from the chosen javascript), and I can only imagine that it's then not able to calculate the width properly.

Thoughts?

@kevinelliott

This comment has been minimized.

Show comment
Hide comment
@kevinelliott

kevinelliott Nov 18, 2011

I really wish I could get this to work in ANY circumstance (even if I have to force it). Nothing seems to work. I will be forced to abandon this entirely (and I certainly won't want to deal with this broken stuff again).

kevinelliott commented Nov 18, 2011

I really wish I could get this to work in ANY circumstance (even if I have to force it). Nothing seems to work. I will be forced to abandon this entirely (and I certainly won't want to deal with this broken stuff again).

@KidkArolis

This comment has been minimized.

Show comment
Hide comment
@KidkArolis

KidkArolis Nov 19, 2011

Make sure your select has some CSS applied, stylesheet or inline. If you do it with stylesheet it means you have to inject the element into the DOM before you call chosen().

But I agree that getting this right is very difficult. I would really like to be able to apply a width to the chosen select via CSS. One class, one width, px or %.
My CSS would then look like

.example select, .example .chzn-smth {
width: 50%;
}

And this would apply the width correctly no matter how or when or where you call chosen.

KidkArolis commented Nov 19, 2011

Make sure your select has some CSS applied, stylesheet or inline. If you do it with stylesheet it means you have to inject the element into the DOM before you call chosen().

But I agree that getting this right is very difficult. I would really like to be able to apply a width to the chosen select via CSS. One class, one width, px or %.
My CSS would then look like

.example select, .example .chzn-smth {
width: 50%;
}

And this would apply the width correctly no matter how or when or where you call chosen.

@plmarcelo

This comment has been minimized.

Show comment
Hide comment
@plmarcelo

plmarcelo Mar 10, 2015

$('select').chosen({width: '100%'}); by @pfiller worked for me in a collapsable panel.

Thanks

plmarcelo commented Mar 10, 2015

$('select').chosen({width: '100%'}); by @pfiller worked for me in a collapsable panel.

Thanks

rickychilcott added a commit to RBSavvy/chosen-rails that referenced this issue Apr 1, 2015

@SurajShukla

This comment has been minimized.

Show comment
Hide comment
@SurajShukla

SurajShukla Apr 15, 2015

How can I get rid of the chosen-search class as I am not able to load the assets in my project directory?

SurajShukla commented Apr 15, 2015

How can I get rid of the chosen-search class as I am not able to load the assets in my project directory?

@djabraham

This comment has been minimized.

Show comment
Hide comment
@djabraham

djabraham Apr 19, 2015

I had to add a timeout, when loading static selects from a template that had not been rendered yet. Nothing in the hierarchy had metrics when it attempted initialization. Wrapping it in a zero timeout at least bumped initialization to the end of the event queue..

// Found this in chosen.jquery.js and patched it as follows
AbstractChosen = (function () {
    function AbstractChosen(form_field, options) {
        if (!AbstractChosen.browser_is_supported()) {
            return;
        }

        var self = this;
        window.setTimeout(function () {
            self.form_field = form_field;
            self.options = options != null ? options : {};
            self.is_multiple = self.form_field.multiple;
            self.set_default_text();
            self.set_default_values();
            self.setup();
            self.set_up_html();
            self.register_observers();
        }, 0);
    }

djabraham commented Apr 19, 2015

I had to add a timeout, when loading static selects from a template that had not been rendered yet. Nothing in the hierarchy had metrics when it attempted initialization. Wrapping it in a zero timeout at least bumped initialization to the end of the event queue..

// Found this in chosen.jquery.js and patched it as follows
AbstractChosen = (function () {
    function AbstractChosen(form_field, options) {
        if (!AbstractChosen.browser_is_supported()) {
            return;
        }

        var self = this;
        window.setTimeout(function () {
            self.form_field = form_field;
            self.options = options != null ? options : {};
            self.is_multiple = self.form_field.multiple;
            self.set_default_text();
            self.set_default_values();
            self.setup();
            self.set_up_html();
            self.register_observers();
        }, 0);
    }
@sobrinho

This comment has been minimized.

Show comment
Hide comment
@sobrinho

sobrinho Jun 30, 2015

I've just been bitten by this bug, 100% fixed the problem for me.

@harvesthq would you accept a pull request fixing this? Not sure about the best solution yet but I would be happy to fix and make a pull request ❤️

sobrinho commented Jun 30, 2015

I've just been bitten by this bug, 100% fixed the problem for me.

@harvesthq would you accept a pull request fixing this? Not sure about the best solution yet but I would be happy to fix and make a pull request ❤️

@erobwen

This comment has been minimized.

Show comment
Hide comment
@erobwen

erobwen Sep 10, 2015

A robust workaround for this is to use ng-if instead of ng-show. Works perfectly and is simple.

I have figured out that ng-if is the prefered choice in many situations. Not only repairing broken ng-select, but also to allow recursive controllers (using a combination of ng-if, ng-controller, ng-init and ng-template).

erobwen commented Sep 10, 2015

A robust workaround for this is to use ng-if instead of ng-show. Works perfectly and is simple.

I have figured out that ng-if is the prefered choice in many situations. Not only repairing broken ng-select, but also to allow recursive controllers (using a combination of ng-if, ng-controller, ng-init and ng-template).

@raffaeletani

This comment has been minimized.

Show comment
Hide comment
@raffaeletani

raffaeletani Sep 11, 2015

so it seems this 4 years old issue is still not resolved?!?!

raffaeletani commented Sep 11, 2015

so it seems this 4 years old issue is still not resolved?!?!

randycoulman added a commit to OregonShakespeareFestival/digital-archives that referenced this issue Oct 28, 2015

Ensure production credits selectors display correctly
In the bulk upload form, the production credits selectors are initially
hidden.  Because of a [known bug in
chosen.js](harvesthq/chosen#92), that causes
the Chosen widget to have a width of 0px.

The [Chosen
documentation](https://harvesthq.github.io/chosen/options.html)
indicates that you must specify a width explicitly in this case.

Based on the styling of the underlying select element, I chose to use
`width: “100%”`, and that seems to work quite well.
@cederlof

This comment has been minimized.

Show comment
Hide comment
@cederlof

cederlof commented Dec 10, 2015

+1

@koenpunt koenpunt referenced a pull request that will close this issue Jan 4, 2016

Open

use inherit for width when offsetWidth is 0 #2495

@LauraLalune

This comment has been minimized.

Show comment
Hide comment
@LauraLalune

LauraLalune Mar 16, 2016

+1 in the meantime... I'm using select2

LauraLalune commented Mar 16, 2016

+1 in the meantime... I'm using select2

@Shakthivakeeswaran

This comment has been minimized.

Show comment
Hide comment
@Shakthivakeeswaran

Shakthivakeeswaran May 3, 2016

Is there any way to have a spinner in the area expanding when clicked chosen picklist, It must happen while data is being appended to the chosen jquery. I am processing a huge number of records into chosen jquery and it takes time to process and show them. ??

Shakthivakeeswaran commented May 3, 2016

Is there any way to have a spinner in the area expanding when clicked chosen picklist, It must happen while data is being appended to the chosen jquery. I am processing a huge number of records into chosen jquery and it takes time to process and show them. ??

@fsparv

This comment has been minimized.

Show comment
Hide comment
@fsparv

fsparv Oct 30, 2016

What an epic 5 year bug... and still biting people (ouch!).

fsparv commented Oct 30, 2016

What an epic 5 year bug... and still biting people (ouch!).

@LukeMcLachlan

This comment has been minimized.

Show comment
Hide comment
@LukeMcLachlan

LukeMcLachlan Oct 30, 2016

Google has a similar bug with their map that doesn't display properly in a hidden div. however both these problems have workarounds that are simple to implement.

LukeMcLachlan commented Oct 30, 2016

Google has a similar bug with their map that doesn't display properly in a hidden div. however both these problems have workarounds that are simple to implement.

@fsparv

This comment has been minimized.

Show comment
Hide comment
@fsparv

fsparv Oct 30, 2016

Yes, I hit that google maps bug some time last year IIRC, but how many folks spent half a day cursing and trying various things before finding this report? Bugs like these in popular libraries waste hours of time. Multiplied across the number of folks learning either of these libraries each year the aggregate costs are probably staggering... If they aren't going to fix it, that's ok. Fixing it at this point might interact strangely with vast numbers of deployed workarounds perhaps... In that case they should admit they aren't fixing it and document the workaround somewhere prominent in the documentation so that folks don't struggle to make (or miss) deadlines over this stuff.

fsparv commented Oct 30, 2016

Yes, I hit that google maps bug some time last year IIRC, but how many folks spent half a day cursing and trying various things before finding this report? Bugs like these in popular libraries waste hours of time. Multiplied across the number of folks learning either of these libraries each year the aggregate costs are probably staggering... If they aren't going to fix it, that's ok. Fixing it at this point might interact strangely with vast numbers of deployed workarounds perhaps... In that case they should admit they aren't fixing it and document the workaround somewhere prominent in the documentation so that folks don't struggle to make (or miss) deadlines over this stuff.

@brianjcohen

This comment has been minimized.

Show comment
Hide comment
@brianjcohen

brianjcohen Apr 5, 2017

My "overall" fix is similar to others, and it assumes that all my selects' widths in the markup are 100% of their parent div. We use bootstrap so this is the case for us.

Run this code just after you initialize .chosen() at page load.

$(".chosen-container").each(function(i, elem) {
	if ($(elem).width() == 0) {
		$(elem).width("100%");
	}
});

brianjcohen commented Apr 5, 2017

My "overall" fix is similar to others, and it assumes that all my selects' widths in the markup are 100% of their parent div. We use bootstrap so this is the case for us.

Run this code just after you initialize .chosen() at page load.

$(".chosen-container").each(function(i, elem) {
	if ($(elem).width() == 0) {
		$(elem).width("100%");
	}
});
@geordi-la-forge

This comment has been minimized.

Show comment
Hide comment
@geordi-la-forge

geordi-la-forge Apr 7, 2017

To those of you that had a problem where if the element was initially inside a css hidden container, and then when made visible had a width of 0px - the fix I found was to set the width in js config;

var config = { '.chosen-select' : {}, '.chosen-select-width' : {width:"95%"} } for (var selector in config) { $(selector).chosen(config[selector]); }

Then I gave the select inputs the css class chosen-select-width

<select name="f01" class="chosen-select-width" id="item_select_staff">

Seemed to do the trick with chosen v1.6.2 and jquery version 3.1.1.

geordi-la-forge commented Apr 7, 2017

To those of you that had a problem where if the element was initially inside a css hidden container, and then when made visible had a width of 0px - the fix I found was to set the width in js config;

var config = { '.chosen-select' : {}, '.chosen-select-width' : {width:"95%"} } for (var selector in config) { $(selector).chosen(config[selector]); }

Then I gave the select inputs the css class chosen-select-width

<select name="f01" class="chosen-select-width" id="item_select_staff">

Seemed to do the trick with chosen v1.6.2 and jquery version 3.1.1.

@KZeni

This comment has been minimized.

Show comment
Hide comment
@KZeni

KZeni Jun 1, 2017

I just leave the default chosen width option (auto) and add

.chosen-container { min-width:5em; }

to my site's CSS (adjusting the min-width as needed). This makes it never become 0px (or just too small to use) while still fitting the select's ideal width when possible (forcing a 100% width or something to that effect doesn't work well when you have select elements inline with other content & this method addresses the core issue as well as allowing for inline select elements & seemingly offering the simplest & most straightforward implementation).

KZeni commented Jun 1, 2017

I just leave the default chosen width option (auto) and add

.chosen-container { min-width:5em; }

to my site's CSS (adjusting the min-width as needed). This makes it never become 0px (or just too small to use) while still fitting the select's ideal width when possible (forcing a 100% width or something to that effect doesn't work well when you have select elements inline with other content & this method addresses the core issue as well as allowing for inline select elements & seemingly offering the simplest & most straightforward implementation).

@bhartvigsen

This comment has been minimized.

Show comment
Hide comment
@bhartvigsen

bhartvigsen May 23, 2018

How is this still broken after SEVEN years?

bhartvigsen commented May 23, 2018

How is this still broken after SEVEN years?

@koenvanderlinden

This comment has been minimized.

Show comment
Hide comment
@koenvanderlinden

koenvanderlinden Sep 14, 2018

My workarond with bootstrap 3 is adding the following style:

.chosen-container {
    min-width: 90%;
}

koenvanderlinden commented Sep 14, 2018

My workarond with bootstrap 3 is adding the following style:

.chosen-container {
    min-width: 90%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment