Select2 responsiveness with DAL (Django Autocomplete Light) - Width 100% !important not working

Question

It's been a struggle for the past day to me. I've looked everywhere on the internet and can't manage to get it done.

I use DAL and initialize widgets with URLs. So far so good:

   sector = django_filters.ModelMultipleChoiceFilter(
        queryset=Sector.objects.all(),
        widget=autocomplete.ModelSelect2Multiple(
            url="sector-autocomplete",
            attrs={
                "data-placeholder": "Secteur",
            },
        ),
    )

The problem occurs when I resize the page. The select2 items always overflow my container unless I refresh the page, which is not practical from a user point of view.

There seems to be no other items which could be responsible for this overflow.

The general recommendation is to set the following css rule:

.select2 {
  width: 100%!important;
}

It actually feels like it's working when I begin reducing the viewport's width, until a point where the width remains fixed.

The css rule on .select2 is actually taken into account, however the computed width seems to still be secretely fixed.

<select name="sector" data-placeholder="Secteur" id="id_sector" data-autocomplete-light-language="fr" data-autocomplete-light-url="/sector-autocomplete/" data-autocomplete-light-function="select2" multiple="" data-select2-id="id_sector" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true">
</select>
<span class="select2 select2-container select2-container--default" dir="ltr" data-select2-id="6" style="width: 428.5px;">
 <span class="selection">
 <span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1" aria-disabled="false">
 <ul class="select2-selection__rendered">
  <li class="select2-search select2-search--inline"><input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" role="searchbox" aria-autocomplete="list" placeholder="Secteur" style="width: 416.5px;">
  </li>
 </ul>
 </span>
 </span>
 <span class="dropdown-wrapper" aria-hidden="true">
 </span>
</span>

I tried setting the 'width:100%' setting on window resize with Javascript, but this resets my fields completely (did .select2("destroy").select2()), and I'm not sure how I can simply intialize it again with data coming from the URL.

Also tried, to no avail:

$(".select2").select2({
    width: 'resolve' 
});

Thanks for your help!

Using Django 4.1.3, Python 3.11

Answer 1

Actually...posting this answer and laying out the html code just gave me the solution.

You'll see that both the .select2-search__field and .select2 items have a computed fixed width.

So, just added the width: 100% attribute there as well:

.select2-search__field {
  width: 100%!important;
}

If you don't mind, I'll leave this post, as I see that select2 responsiveness is sometimes problematic.