Kendo - 显示下拉父级 div

Question

我正在使用 Kendo Ext 库 (https://github.com/jsExtensions/kendoui-extended-api) 在下拉列表中呈现树视图。我遇到的问题是控件隐藏在父 div 下面。然而，与正常的 Kendo 下拉列表相比，该控件不会遇到同样的问题。

这是我目前的例子： https://jsfiddle.net/6xxau9d4/1/

HTML

<div class="elm1">
  <div id="dropDownTreeView"></div>
  <input id="sample1" value="1" style="width: 150;" />
  <input id="sample2" value="1" style="width: 150x;" />
</div>

JS

var dropDownTreeView = $("#dropDownTreeView").kendoExtDropDownTreeView({
  treeview: {
    dataSource: new kendo.data.HierarchicalDataSource({
      data: [{
        text: "Furniture",
        items: [{
          text: "Tables & Chairs"
        }, {
          text: "Sofas"
        }, {
          text: "Occasional Furniture"
        }]
      }, {
        text: "Decor",
        items: [{
          text: "Bed Linen"
        }, {
          text: "Curtains & Blinds"
        }, {
          text: "Carpets"
        }]
      }]
    })
  }
}).data("kendoExtDropDownTreeView");

dropDownTreeView.dropDownList().text("Dropdown Treeview")

$(document).ready(function() {

  $("#sample1").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: [{
      text: "Sample1",
      value: null
    }],
    template: "<div id='myfancyid' class='k-ext-treeview'>test</div>",
    height: 400,
    open: function(e) {
      var elm = e.sender.list.find("#myfancyid");
      var dropDownTreeView = $(elm).kendoTreeView({
        dataSource: new kendo.data.HierarchicalDataSource({
          data: [{
            text: "Furniture",
            items: [{
              text: "Tables & Chairs"
            }, {
              text: "Sofas"
            }, {
              text: "Occasional Furniture"
            }]
          }, {
            text: "Decor",
            items: [{
              text: "Bed Linen"
            }, {
              text: "Curtains & Blinds"
            }, {
              text: "Carpets"
            }]
          }]
        })
      });


    }
  });
  $("#sample2").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: [{
      text: "Sample2",
      value: null
    }],
    template: "<div id='myfancyid' class='k-ext-treeview'>test</div>",
    height: 400,
    open: function(e) {
      var elm = e.sender.list.find("#myfancyid");
      var dropDownTreeView = $(elm).kendoTreeView({
        dataSource: new kendo.data.HierarchicalDataSource({
          data: [{
            text: "Furniture",
            items: [{
              text: "Tables & Chairs"
            }, {
              text: "Sofas"
            }, {
              text: "Occasional Furniture"
            }]
          }, {
            text: "Decor",
            items: [{
              text: "Bed Linen"
            }, {
              text: "Curtains & Blinds"
            }, {
              text: "Carpets"
            }]
          }]
        })
      });


    }
  });


});

CSS

.elm1 {
  width: 400px;
  height: 100px;
  background-color: grey;
  position: relative;
  overflow: scroll;
}

#customers-list .k-item {
  line-height: 1em;
  min-width: 300px;
  background-color: white;
  display: inline-block;

其中 Sample1 和 Sample2 执行我想要的方式，但 Dropdown Treeview 不执行.我一直在研究源代码，试图了解是什么让 Sample1 和 Sample2 起作用，但我还没有意识到。非常感谢在正确方向上提供的任何帮助。

Answer 1

默认情况下，Kendo UI DropDownLists、ComboBoxes、DatePickers 和类似的小部件使用 detached 弹出窗口，它是 <body>元素。这可确保这些弹出窗口（或下拉菜单，如果您愿意）将能够停留在其他页面内容之上，而不受固定高度或可滚动容器的限制。

另一方面，ExtDropDownTreeView 小部件在放置原始小部件元素的同一位置呈现其下拉列表。由于小部件元素位于您的情况下的固定高度可滚动容器内，因此会导致观察到的问题。

Kendo - 显示下拉父级 div

Kendo - Display dropdown over-top parent div

html

css

kendo-ui

dropdown