CODEWITHSUNDEEP
htmlcsskendo-uidropdown
fortune
fortune

Reputation: 1567

Kendo - Display dropdown over-top parent div

I'm using the Kendo Ext library (https://github.com/jsExtensions/kendoui-extended-api) to render a Treeview inside of a Dropdown List. The problem I'm having is that the control get's hidden underneath the parent div. However when compared to the normal Kendo Dropdown List, that control does not suffer the same problem.

This is the example I have so far: 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;

Where Sample1 and Sample2 perform how I would like, but Dropdown Treeview does not. I've been pouring over the source trying to understand what makes Sample1 and Sample2 work, but I have yet to come to a realization. Any help in the right direction is much appreciated.

Upvotes: 0

Views: 1388

Answers (1)

dimodi
dimodi

Reputation: 4139

By default, the Kendo UI DropDownLists, ComboBoxes, DatePickers and similar widgets, use a detached popup, which is a child of the <body> element. This ensures that these popups (or dropdowns, if you prefer) will be able to stay on top of the other page content and not be restricted by fixed-height or scrollable containers.

On the other hand, the ExtDropDownTreeView widget renders its dropdown in the same place, where the original widget element is placed. Since the widget element is located inside a fixed height scrollable container in your case, this causes the observed problem.

Upvotes: 1

Related Questions