Не удается правильно отобразить ModelSelect2Multiple в модальном окне
у меня есть модель книги, в которой есть поле authors, которое является полем ManyToMany для модели Author.
Я использую пакет django-autocomplete-light для отображения виджета select2 в моих шаблонах, который позволит мне выбирать более одного автора при создании новых книг. (Используя ModelSelect2Multiple)
Таким образом, поле отображается нормально на обычной html-странице. Но когда я пытаюсь отобразить точно такую же форму в модальном окне DaisyUI, выпадающее меню, которое оно должно открыть, открывается в задней части модального окна (как я вижу, оно отображается за модальным окном).
Вот моя анкета:
class BookForm(forms.ModelForm):
class Meta:
model = Book
fields = (
'title',
'authors',
)
widgets = {
'authors': autocomplete.ModelSelect2Multiple(
url=reverse_lazy('shop:authors-autocomplete')
)
}
Вот модальный контейнер (в соответствии с документацией из django-autocomplete-light):
{% load static %}
<dialog id="new_book_modal_container" class="modal">
<div class="modal-box">
<div id="response">
<strong>form will be placed here</strong>
</div>
</div>
</dialog>
<script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
{{ form.media }}
Вот шаблон формы:
{% load static %}
<div>
{% if form %}
<form>
{% csrf_token %}
{{ form.as_p }}
<button type="submit" class="btn btn-primary btn-sm">
Submit
</button>
</form>
{% endif %}
</div>
Используя htmx, я открываю пустой модальный файл при нажатии кнопки, отправляю запрос get в представление, которое предоставит форму. ответ из этого представления будет помещен в модальный файл.
(Опять же, форма отлично отображается на обычной html-странице без проблем, но не на модальной. Кроме того, все просто. у меня нет никакого пользовательского стиля.)
(Я также готов просто попробовать отрисовать виджет "многие ко многим" для администратора django по умолчанию, если у него нет этой проблемы)
Мы будем признательны за любую помощь. Заранее спасибо.
это, вероятно, вызвано отображением выпадающего списка select2 за пределами видимой области модала, поскольку вы используете модал, вам следует установить параметр dropdownParent
, чтобы select2 прикреплял выпадающий список к модальному контейнеру
вы можете сделать это, обновив свой виджет следующим образом:
class BookForm(forms.ModelForm):
class Meta:
model = Book
fields = ('title', 'authors')
widgets = {
'authors': autocomplete.ModelSelect2Multiple(
url=reverse_lazy('shop:authors-autocomplete'),
attrs={'data-dropdown-parent': '#new_book_modal_container'}
)
}
надеюсь, это поможет