fixed-header class 应用于 body 的 Select2 插件呈现问题

Question

当 fixed-header class 应用于 [=44] 时，select2 插件出现奇怪的渲染问题=] 标签。我设法用模板分发的演示文件复制了这个问题。我已经用 1.8.6.2 和 1.8.7.1

版本检查过它

要查看问题，请导航至 file:////DEVELOPER/HTML_Full_Version/plugins。html 单击屏幕右上角的转向齿轮并选中 "Fixed Header" 复选框。然后向下滚动到 "Plugins & Enhancers" 小部件并尝试打开 (drop-down) 任何 select2 组合（问题出现在它们中，无论是单个 select 还是多个 select). 更具体地说，当下拉框出现时，它会越过输入元素并占据其 space 而不是在其下方。如果下拉框由于下方缺少 space 而需要位于输入元素的顶部，则不会出现此问题。请查看以下演示问题的屏幕截图：

单身select 多个select

请注意，问题并未出现在 on-line 演示中，可以在此处找到 http://192.241.236.31/themes/preview/smartadmin/1.8.x/ajax/index.html#ajax/plugins.html 这很奇怪，但表明这不是浏览器特定的（我使用 Firefox） , 不过我试图找出本地文件和 on-line 源文件之间的区别，但无济于事。

谢谢。

Answer 1

var parentElement = $(".jarviswidget");

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

Answer 2

当您启动插件 select2 时，将 Json 参数 {"dropdownParent": object} 设置为另一个 wrapper（不是 body 标记）对象的值有 CSS 属性 position:relative。例如，对于 smartadmin 模板，它可以是 $('.jarviswidget')。

问题是 body class .fixed-header 设置标签 header CSS 属性 position: fixed。 select2 插件初始化后自动生成的 HTML 代码也有样式 position: absolute ...，它会向下移动 select2 标签，因为默认情况下，额外的 select2 HTML 代码直接在 body 标记中生成，就在 body 关闭之前。 .

fixed-header class 应用于 body 的 Select2 插件呈现问题

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

html

rendering

jquery-select2

smartadmin