Chosen multiple select dropdown in IE causing huge blank space below the page ( only in IE)

[bharos]

I am using chosen for multiple select , with dropdown values from angular controller. Everything is fine in Mozilla and chrome.. But in IE (I am on IE 10,but I think this is present in IE 11 as well), the functionality is working, but after selecting an option from dropdown, the browser scrollbar becomes so small and large blank space is produced at bottom of page.. This is kind of weird, it sometimes becomes normal after a click outside or when page is scrolled.. But I guess this is a bug with chosen+ IE...
Please try this on a page with a browser scroll-bar ( ie. page which has content more than default browser window size), which has chosen multi-select dropdown...
Please tell if this is a known issue or any workarounds for this..

[tjschuck]

What version of Chosen are you using? If not the latest version, does it still happen on the latest version?

Can you please link to a publicly accessible page (or a Fiddle) that shows the issue so we can attempt to reproduce? Alternatively, confirm that the Chosen demo page shows the issue.

[ju5tj3n]

I believe this is the same issue we experience. It only seems to happen in IE and when chosen has enough items to scroll. Anytime chosen update is triggered it makes the scrollbar tiny and adds a bunch of space. We do this to reset chosen to empty/update options etc.

To see the issue, open this fiddle in IE, chose an option and click update.
http://jsfiddle.net/ax2yny7t/1/

[bharos]

Hi,

I fixed this issue by adding some CSS to .chosen-container .chosen-drop classes.

.chosen-container .chosen-drop {
overflow-y: auto;
max-height: 400px;
}
This is a workaround, as I understood that the chosen dropdown, when in hidden state is having a large size, when it has large number of options. So when we restrict the max-height this doesn't happen. Make this max-height to a comfortable value according to your requirements. But this is an issue which needs to be addressed from chosen, this is just a workaround.

[ju5tj3n]

@bharos Thanks for the workaround, not perfect but much better.

[wkerswell]

I have also just found this issue. I will try the walk around that @bharos has provided. Thanks.

[slop3n]

Im also having this issue and the scenario is this:
I have 4 multiselects, the first 3 have defined lists of elements, the 4th is filtered by a combination of the first 3 using an ajax call. When there is no selected option from the first 3 multiselects the 4th one is cleared. Whenever i select something from the first 3 multiselects and quickly scroll down(only have to scroll down on my first attempt) i get a huge blank spot below my content(after the first attempt i get the huge blank spot every time i change an option from the multiselect). When i click on the 4th multiselect somehow the blank content is cleared.
I also dont have any idea what/why this is happening. Just thought my case might help. Its a .NET application if it matters(i highly doubt it), and also happens only in IE 9-11.

It seems to be only happening after i clear the 4th multiselect from already chosen options, or i click it and then select an option from the first 3.
@bharos's workaround fixed it for me too

[bharos]

Thanks :) Yeah, but its just a workaround

[WHarris22]

I created a stackoverflow post about this a while ago!

I tried updating the plugin from version 1.0 to 1.5.1 and this didn't fix it, but @bharos' work around definitely improves things but is not a complete solution because smaller screen sizes may still have a bit of vertical overflow added. But thanks for the work around!

I know it may not be considered a big problem as it only occurs in IE, but it would still be great if the maintainer could fix this in a future release.