Link to home
Create AccountLog in
Avatar of Starr Duskk
Starr DuskkFlag for United States of America

asked on

Setting the Width on a Select2 Placeholder - shows as 0 width

I have two multiple select2 drop down lists on two different pages.

One has a width set for the placeholder, and the other does not when I do an inspect, but I copied the code setup for the first to the second and can't find anywhere that an actual width is being set. The failing one has the width set to 0. The successful one has the width set to 288. But I find 288 no where in my code.

<input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="[Select]" style="width: 0px;">

Open in new window

both use the exact same method:

placeholder: '[Select]',
allowClear: true,
matcher: function (params, data) {
    return matchStart(params, data);
width: 'resolve',
allowClear: true,
multiple: true,scrollAfterSelect: false,closeOnSelect: false

Open in new window

Any ideas where I can find where that width is set? When I create each method, the width is set to 'resolve'

Avatar of leakim971
Flag of Guadeloupe image

Link to home
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of Starr Duskk


I looked at our style and we have it set to 100%

.select2-container {
    width: 100% !important;

Open in new window

Do you have any idea why one would translate to 288 and the other to 0?

using 100% use their respective container width so you did nothing using 100%, 100% of 0 pixel is 0 pixel so you get 0.