Почему в django-autocomplete-light одиночный выбор плохо стилизован и сломан, когда мультивыбор работает?

У меня есть экран в Django с автозаполнением с одним выбором и автозаполнением с несколькими выборами для одного и того же объекта модели (но разных полей модели). Мультивыбор работает отлично, одновыборочный работает, но плохо стилизован и немного сломан (требуется дополнительный клик, чтобы попасть в поле для ввода).

enter image description here

Помощь?

EDIT: Если я удаляю поле мультиселекта из формы, односелектный все еще плохо стилизован и сломан. Таким образом, хотя мультивыбор показывает, что что-то может работать, скорее всего, это не имеет отношения к делу.

EDIT: Я жестко обновил свой браузер и попробовал другой браузер (Firefox), так что я думаю, что это не просто устаревшие активы.

Более подробно:

  • Django 4.1.5

  • django-autocomplete-light 3.9.4

  • django-bootstrap5 22.2

  • сгенерированный HTML

мультивыбор (работает):

<span
class="select2-selection
select2-selection--multiple
form-select"
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="Type
here"
style="width:
288px;"></li></ul></span>

.select2-container .select2-selection--multiple: min-height: 32px

одиночный выбор (сломан):

<span
class="select2-selection
select2-selection--single
form-select"
role="combobox"
aria-haspopup="true"
aria-expanded="false"
tabindex="0"
aria-disabled="false"
aria-labelledby="select2-id_primary_diagnosis-container"><span
class="select2-selection__rendered"
id="select2-id_primary_diagnosis-container"
role="textbox"
aria-readonly="true"><span
class="select2-selection__placeholder">Type
here</span></span><span
class="select2-selection__arrow"
role="presentation"><b
role="presentation"></b></span></span>

"display:inline prevents height:28px from having an effect"
  • В файле forms.py:
class MyobjForm(forms.Form):
    # NOTE: can't use ModelForm for various reasons not shown
    single_select = forms.ModelChoiceField(
        label='single select',
        queryset=Myobj.objects.all(),
        widget=autocomplete.ModelSelect2(
            url="myobj-autocomplete",
            attrs={
                "data-placeholder": "Type here",
                # Only autocomplete after 1 character has been typed
                "data-minimum-input-length": 1,
            },
        ),
    )
    multi_select = forms.ModelMultipleChoiceField(
        label='multi select',
        queryset=Myobj.objects.all(),
        required=False,
        widget=autocomplete.ModelSelect2Multiple(
            url="myobj-autocomplete",
            attrs={
                "data-placeholder": "Type here",
                # Only autocomplete after 1 character has been typed
                "data-minimum-input-length": 1,
            },
        ),
    )
  • В шаблонах:
{% load django_bootstrap5 %}

...

{% block head_script %}
    {# include jquery and the form media to get django-autocomplete-light to work #}
    <script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
    {{labeledencounter_form.media}}
{% endblock head_script %}

 ...

 {% bootstrap_form myform %}

Шаблонные медиа-заголовки компилируются в:

    <script type="text/javascript" src="/static/admin/js/vendor/jquery/jquery.js"></script>
    <link href="/static/admin/css/vendor/select2/select2.css" media="screen" rel="stylesheet">
<link href="/static/admin/css/autocomplete.css" media="screen" rel="stylesheet">
<link href="/static/autocomplete_light/select2.css" media="screen" rel="stylesheet">
<script src="/static/admin/js/vendor/select2/select2.full.js"></script>
<script src="/static/autocomplete_light/autocomplete_light.js"></script>
<script src="/static/autocomplete_light/select2.js"></script>
<script src="/static/autocomplete_light/i18n/en.js"></script>

...

<label class="form-label" for="id_select_select">single select</label><select name="select_select" data-placeholder="Type here" data-minimum-input-length="1" class="form-select" required id="id_select_select" data-autocomplete-light-language="en" data-autocomplete-light-url="/myobj-autocomplete/" data-autocomplete-light-function="select2">
  <option value="" selected>---------</option>

</select></div><div class="mb-3"><label class="form-label" for="id_multi_select">multi select</label><select name="multi_select" data-placeholder="Type here" data-minimum-input-length="1" class="form-select" id="id_multi_select" data-autocomplete-light-language="en" data-autocomplete-light-url="/myobj-autocomplete/" data-autocomplete-light-function="select2" multiple>

  • еще несколько скриншотов:
  • функциональный мультиселектор открыт:

enter image description here

  • разомкнут односекционный переключатель:

enter image description here

  • функциональный мультиселект в отладчике chrome:

enter image description here

  • сломан одиночный выбор в отладчике chrome:

enter image description here

Эй, вы уверены, что переопределение CSS не работает для единственного выбора? Я воспользовался вашим предложением и, кажется, оно работает для меня:

.select2-container .select2-selection--single {
    min-height: 2.5rem;
}

Я думал, что display:block понадобится и там, но, похоже, все работает и без него.

Вернуться на верх