Select2 Plugin Rendering Problems with fixed-header class applied to body

Question

I am experiencing a strange rendering problem with the select2 plugin when the fixed-header class is applied to the body tag. I have manage to replicate the problem with the demo files distributed with the template. I have checked it with versions 1.8.6.2 and 1.8.7.1

To see the problem please navigate to file:////DEVELOPER/HTML_Full_Version/plugins.html click on the turning gears on the top right side of the screen and check the "Fixed Header" checkbox. Then scroll down to "Plugins & Enhancers" widget and try to open (drop-down) any of the select2 combos (the problem appears in both of them either single select or multiple select). More specific when the drop down box appears it goes over the input element and occupies its space instead going under it. The problem doesn't appear if the drop down box needs to go on top of the input element due to lack of space below it. Please take a look at the following screenshots demonstrating the problem:

Single select Multiple select

Please note that the problem doesn't appear on the on-line demo that can be found here http://192.241.236.31/themes/preview/smartadmin/1.8.x/ajax/index.html#ajax/plugins.html which is very strange but indicates that this isn't browser specific (I use Firefox), nevertheless I tried to find what the differences are between the local files and the on-line source but to no avail.

Thank you.

Answer 1

When you initiate plugin select2, set Json parameter {"dropdownParent": object} with the value of the object of another wrapper (not body tag) that has CSS property position:relative. For example, in case with smartadmin template, it can be $('.jarviswidget').

The problem is that body class .fixed-header sets for tag header CSS property position: fixed. Automatically generated HTML code after select2 plugin initialization also has styles position: absolute ..., and it moves select2 tags down because, by default, additional select2 HTML code is generated directly in body tag, exactly before body closed. .

Answer 2

var parentElement = $(".jarviswidget");

        if ($('.select2').length) {
            $('.select2').select2({
                "dropdownParent": parentElement,
                "allowClear": !0,
                "width": "100%"
            });
        }