chosen
chosen copied to clipboard
harvesthq
if select is initially hidden, doesn't work
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?
Yes you should patch the coffee script. Also I'm for the ability to setup hidden elements.
+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;
}
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;
}
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()
@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.
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
+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.
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.
+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...
+1 This bug is blocking usage of the Chosen plugin for internal apps at Netflix
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.
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.
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.
@DelvarWorld what pull request are you referring to? I see one open pull request from you and it does not address this issue.
@pfiller The one listed above in this thread, https://github.com/DelvarWorld/chosen-hacks/commit/e9501568acae1988ba51b5a29269023d3400db42
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 my pull request does that, every time the dropdown is shown it matches the width of the element
@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.
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.
@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?
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.
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.
I am installing the latest jquery that is packaged in the rails jquery gem and jquery-ujs. I suppose this is still too old?