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

Starr Duskk
Starr Duskk used Ask the Experts™
on
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:

$('.ddlSelectMultiple').select2({
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'

thanks!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Multitechnician
Top Expert 2014
Commented:
https://select2.org/appearance#container-width

Width is determined from the select element's style attribute. If no style attribute is found, null is returned as the width.

So the right way is to add a style to your initial select/dropdown :
style="width:300px;">

another way using !important keyword : http://jsfiddle.net/oqyz9h0e/

.select2-container {
  width:600px !important;
}

Open in new window

Starr DuskkASP.NET VB.NET Developer

Author

Commented:
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?

thanks!
leakim971Multitechnician
Top Expert 2014

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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial