CODEWITHSUNDEEP
javascriptjqueryhtmlcssgoogle-chrome
mpen
mpen

Reputation: 282885

How to prevent <select> height from shrinking after filtering?

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.

Upvotes: 3

Views: 406

Answers (2)

mpen
mpen

Reputation: 282885

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.

Upvotes: 3

KesaVan
KesaVan

Reputation: 1031

Try this:

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

Here is your Answer FIDDLE

CODE:

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

Upvotes: -2

Related Questions