CSS. Select2 and Firefox

zajc

Try to open https://zajc.xyz/hasdjh/test.firefox.html in Firefox 48 in Ubuntu or Windows.

Now zoom in to 200% and click on New.

Part of the section

.DTE_Body

is now out of the screen. If you click now on Field1 you cannot search among options. It is working fine in Google Chrome. I've checked https://select2.github.io/examples.html and zoom in and have no problems there and I think it is the problem with editor.bootstrap.min.css. I didn't test this with DataTable style.

If you zoom out, the search in Select2 fields works again.

The problem is when you have a form with more than 15 fields, the form exceed the screen and the Select2 search fields are not working as expected. At the moment the only workaround is to tell the costumer to zoom out the screen or to use Google Chrome.

allan

It looks like this is a known issue with Select2, Firefox and Bootstrap modals - I found this page from Google for example.

Could you try the $.fn.modal.Constructor.prototype.enforceFocus = function() {}; option mentioned there? The dropdownParent option might be a better option.

Allan

zajc

$.fn.select2.defaults.set("dropdownParent", ".modal");

This doesn't work well. It works until you reach the end of the screen, than Select2 search field appears at a "random" place. It's not working as we expected in both, Firefox and Chrome.

 $.fn.modal.Constructor.prototype.enforceFocus = function() {};

This works perfectly.