0

I want to know if it is possible to disable a particular library for a particular div?

Actually I am having a webpage with a modal dialog. There are two select boxes. First one is outside of modal div, while second one is in the modal div.

The library I am using is unicorn js and unicorn tables js which implicitly calls 

$('select').select2();

of jquery select2 js. Thus the library is invoked on all select elements on the page. This causes the select box to become disabled in modal. I removed the select box out of the modal and it works perfect. So I suspect the select js does not work well with modal dialogs(bootstrap modal dialogs to be particular).

So how do I go about in this scenario so that the select box in the modal is not affected by select js library?

rahulserver
  • 10,411
  • 24
  • 90
  • 164
  • You probably won't be able to use those libraries if their dependencies break things you need - you could fork, find something else, or roll your own to fit your use case. – theWanderer4865 Oct 10 '15 at 12:47

1 Answers1

0

The issue is related to the tabindex="-1" on the modal dialog, this attribute on the container div break select2, remove tabindex="-1" attribute and it'll work fine.

Irvin Dominin
  • 30,819
  • 9
  • 77
  • 111
  • Is this documented anywhere? I tried it BTW but same result :( still interested in your source of this answer – rahulserver Oct 11 '15 at 03:09
  • It's a known issue; you can check here: http://stackoverflow.com/questions/20835872/select2-not-working-inside-bootstrap-modal or here: https://github.com/select2/select2/issues/1645 – Irvin Dominin Oct 11 '15 at 10:04