Select2 when in a modal out of position
Hi everyone,
I'm having trouble displaying a Select2 dropdown inside a modal in my project. The dropdown is always misaligned and appears outside its intended position.
I've taken a screenshot: https://ibb.co/qdTDRzq
Using Metronic 8
Any ideas on how to solve this?
Replies (4)
Hi,
Please check Metronic Select2 with Modal guide to properly use Select2 inside Modals by passing data-dropdown-parent="#kt_modal_1" to the Select2 element.
Regards,
Sean
I have follow the documentation,
So it is all configured,
<select name="business_form[country]" aria-label="Select a Country" data-control="select2" data-placeholder="Select a Country..." data-dropdown-parent="#kt_modal_add_business" class="form-select form-select-solid fw-bold select2-hidden-accessible" data-select2- tabindex="-1" aria-hidden="true" data-kt-initialized="1">
modal:
<div class="modal fade" tabindex="-1" aria-hidden="true">
I have follow the documentation, however still not working, and have tried everything to align the select2
<select name="business_form[country]" aria-label="Select a Country" data-control="select2" data-placeholder="Select a Country..." data-dropdown-parent="#kt_modal_add_business" class="form-select form-select-solid fw-bold select2-hidden-accessible" data-select2- tabindex="-1" aria-hidden="true" data-kt-initialized="1">
modal:
<div class="modal fade" tabindex="-1" aria-hidden="true">
Hi,
Is this example working for you?
Will it be possible to send us a test URL in a private reply?
Regards,
Sean
