digicorp / propeller

Propeller - Develop more, Code less. Propeller is a front-end responsive framework based on Google's Material Design Standards & Bootstrap.
http://propeller.in
MIT License
1.13k stars 141 forks source link

Modal compatibility issues with datepicker and select2 #50

Closed firecat666 closed 7 years ago

firecat666 commented 7 years ago

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 7 years ago

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.

firecat666 commented 7 years ago

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 7 years ago

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.

firecat666 commented 7 years ago

Thank you very much, it worked!

keep on going propeller team