How to prevent height from shrinking after filtering? Asked Jul 10 '14 at 16:46 Active Jul 10 '14 at 18:21 Viewed 352 times 3 0 fiddle HTML <select> <option class="a">aaaaa</option> <option class="a">a</option> <option class="a">a</option> <option class="a">a</option> <option class="a">a</option> <option class="a">a</option> <option class="a">a</option> <option class="a">a</option> <option class="a">a</option> <option class="a">a</option> <option class="a">a</option> <option class="a">a</option> <option class="a">a</option> <option class="b">b</option> <option class="b">b</option> <option class="b">b</option> <option class="b">b</option> <option class="b">b</option> <option class="b">b</option> <option class="b">b</option> <option class="b">b</option> <option class="b">b</option> <option class="b">b</option> <option class="b">b</option> <option class="b">b</option> <option class="b">b</option> <option class="b">b</option> <option class="b">b</option> <option class="b">b</option> <option class="b">b</option> <option class="b">b</option> <option class="b">b</option> <option class="b">b</option> <option class="b">b</option> <option class="b">b</option> <option class="b">b</option> </select> <button>click me</button> JavaScript $('button').on('click', function(ev) { ev.preventDefault(); $('.a').prop('disabled',true); if($('select').find('option:selected').prop('disabled')) { $('select').find('option:enabled:first').prop('selected',true); }; }); CSS option[disabled] { display: none; } Open the fiddle in Chrome. Click the <select>. Observe its height. Click the button. Open the <select> again. Notice how much shorter it is, despite there still being plenty of values in there. Why is Chrome excessively shortening the dropdown list? I want it to be whatever its natural height is, which should be about the same as what it was the first time you opened it. Can I force Chrome to recompute its natural height? This example should be more clear. Pop open each of the selects. Notice they're different heights, despite displaying the same values. javascript jquery html css google-chrome edited Jul 10 '14 at 17:02 mpen asked Jul 10 '14 at 16:46 mpen 272,448 266 850 1,236 I'm not sure what you're getting at. Do you want to see every option in the select list? – Stanley_A Jul 10 '14 at 16:50 1 http://stackoverflow.com/questions/570642/height-of-an-html-select-box-dropdown – Banana Jul 10 '14 at 16:51 @Stanley_A No, just whatever it would be if I didn't filter it. This should make it more clear: http://jsfiddle.net/mnbayazit/54rhz/ look at the heights of the two different dropdowns when you open them. They have different heights despite displaying the exact same values. I want them to be the same. – mpen Jul 10 '14 at 17:00 @Banana I don't want to explicitly set the height of the dropdown. I just want it to not be dumb. – mpen Jul 10 '14 at 17:01 1 @Mark apparently thats the way it is, and theres nothing you can do about it... :/ – Banana Jul 10 '14 at 17:02 @Banana Works fine in Firefox. I think its a bug in Chrome. – mpen Jul 10 '14 at 17:05 Maybe there's a reason behind it (changing list while being opened), maybe there isn't, I wouldn't know. I'd look into simply removing the items, rather than adding a class to hide them. Is there any specific reason why that'd be undesired? – Aidiakapi Jul 10 '14 at 17:09 @Aidiakapi Yes, because I'm redisplaying them later. This is the best way I've found to maintain the order of the options and all their properties without doing some major insert/remove hackery. – mpen Jul 10 '14 at 17:12 2 i think i know why it happens. try removing the `display:hidden` from the disabled items css and count the height of the drop down. as soon as the items are being disabled, their total height is being subtracted from the initially calculated dropdown height. im trying to figure out how to bypass this though... – Banana Jul 10 '14 at 17:18 1 here is the issue on that: https://code.google.com/p/chromium/issues/detail?id=139595 – Nico O Jul 10 '14 at 17:26 this was reported 2 years ago, if it was not fixed yet then maybe its not a bug? – Banana Jul 10 '14 at 17:27 you can bypass the issue if you simply remove the items instead of disabling them... [fiddle](http://jsfiddle.net/TheBanana/54rhz/1/) – Banana Jul 10 '14 at 17:34 1 Here is another playground with things to think about: http://jsfiddle.net/z56Vq/2/ – Nico O Jul 10 '14 at 17:36 @Banana If I remove them, how do I re-add them, maintaining order? I'm using this for a filter. Also, how can it *not* be a bug? This in no way makes sense, and none of the other browsers have this issue. – mpen Jul 10 '14 at 17:37 2 @Banana I think your count theory may be correct. Here is another disturbing demo: http://jsfiddle.net/z56Vq/3/ Readonly has the same effect as disabled items. But it's funny to see that the `` is showing options that should be `display: none;` even the developer tool shows that.. strange. Update: Check this in Firefox. When you open the second select under "readonly" (not multiple) and select one, it will suddenly hide the first elements that should be hidden right away. – Nico O Jul 10 '14 at 17:46

Answer 1

It's a bug (thanks Nico for finding this) and there's no workaround (thanks Banana).

If you want the height to be computed correctly, you have to actually remove the <options> from the DOM.

Answer 2

Try this:

You can give onchange so that the code which will work.

Here is your Answer FIDDLE

CODE:

 <select onchange="(this.value)">
</select>