同构（SmartClient）ListGrid 不允许 Div 标签溢出（与 Twitter Bootstrap 的多选冲突）答案

【问题标题】：Isomorphic (SmartClient) ListGrid Won't Allow Div Tags to Overflow (Conflicts with Twitter Bootstrap's multiselect)同构（SmartClient）ListGrid 不允许 Div 标签溢出（与 Twitter Bootstrap 的多选冲突）
【发布时间】：2014-07-22 12:20:21
【问题描述】：

我有一个应用程序，其中 SmartClient ListGrid 和 Twitter Bootstrap 多选共存。不幸的是，当多选下拉并尝试与 ListGrid 重叠时，它会被切断。问题似乎是 ListGrid 拒绝允许 div 标签溢出。

我翻阅了文档并使用了各种设置，但无法弄清楚如何更改此行为。有什么想法吗？

下面的代码 sn-p 演示了通用 div 标签的问题。我需要将示例 div 标签放在 ListGrid 的顶部。

<html>
  <head>
    <style>
        .my-style {
            overflow: visible;
            border: 1px solid black;
        }
    </style>
    <!--Deleted: jQuery & Isomorphic includes --> 
    <script>
        $(document).ready( function() {
            isc.ListGrid.create({
                top:0, left:100,
                fields: [ {name:'X'}, {name:'Y'} ],
                items: []
            });
            $('#main').html('<div class="my-style">This is a test</div>');
        });
    </script>
  </head>
  <body>
    <div id="main" class="my-style">
        A sample div tag
    </div>
  </body>
</html>

【问题讨论】：

你能给出这个问题的 jsFiddle 例子吗？我不知道您是否可以将所有需要的库加载到其中，但问题的演示可能会让人们更容易建议解决方法
也许你需要让溢出变得重要 // overflow: visible !important;
我认为可以通过调整多选和网格的Z-index css 属性来解决这个问题。试一试。

标签： javascript html css twitter-bootstrap smartclient

【解决方案1】：

SmartClient 在它为小部件生成的 DOM 元素上设置非常高的 zIndex 值。 DOM Integration & Third-party Components 页面解释了使用第三方小部件修复 zIndex 问题的一些选项：

许多小部件库提供了一种在现有 HTML 元素中呈现小部件的机制。我不知道 Bootstrap 多选小部件是否可以做到这一点，但如果可以，该文档页面上提供了有关如何在自定义 SmartClient Canvas 中呈现第三方小部件的示例代码。
李>
只要显示多选小部件，您就可以在ListGrid 上调用getZIndex(true) 并将多选元素的zIndex 动态设置为更高的数字。

此方法假定ListGrid 是顶级小部件（getParentCanvas() 返回null）。如果ListGrid 位于其他 SmartClient 小部件中，则您需要获取顶级小部件的 zIndex。
作为一个不受支持的选项，您可以修改 _nextZIndex、_SMALL_Z_INDEX 和 _BIG_Z_INDEX 类属性以使 SmartClient 使用较低的 zIndex 值。

我还没有尝试过，但是通过查看源代码，bringToFront() Canvas 方法将小部件的 zIndex 设置为 _BIG_Z_INDEX，它也会增加。

还有其他两种选择：

Bootstrap 多选小部件看起来与 SmartClient 多选 SelectItem 非常相似，带有 multipleAppearance:"picklist"。见the Multi-Select example。如果需要，您当然可以设置 SelectItem pickList 的样式，使其看起来与 Bootstrap 多选小部件完全一样。
SmartClient 支持通过 htmlElement 属性将 SmartClient 小部件嵌入到现有 HTML 元素中。

【讨论】：