digicorp/propeller

Modal compatibility issues with datepicker and select2

firecat666 opened this issue · 4 comments

firecat666 commented

i'm using the admin template and want to use select2 and datepicker on a modal, but neither of them seems to work, i click them but nothing happens, looks like it's something related with z-index, can somebody help me???

piyush-digicorp commented

Hello,

You need to initialize the select 2 and date-picker function inside the modal box function. Then only it will work. Please refer to the below function in the bottom of the page:
(https://propeller.in/components/modal.php)

Hope this will solve your purpose. If the problem still persists, please let us know.

  • 👍1
firecat666 commented

thanks, it worked well for the date-picker but still, selet2 with search have an issue... if you click over the search input it doesn't allow type anything, just select elements

sunil-digicorp commented

Hello,

We checked select2 issue. It is bootstrap issue. But we figure out the issue and we had come up with 2 solution.

  1. Remove tabindex="-1" attribute from modal div. Refer below example :
    <div tabindex="-1" class="modal fade" id="list-dialog" style="display: none;" aria-hidden="true">

  2. Add dropdownParent in select2 function. Refer below example
    $(".select-with-search").select2({ theme: "bootstrap", dropdownParent: $("#form-dialog") });

Hope this will solve your purpose. If the problem still persists, please let us know.

  • 👍1
firecat666 commented

Thank you very much, it worked!

keep on going propeller team