CODEWITHSUNDEEP
jquerykendo-uikendo-combobox
user1952461
user1952461

Reputation: 41

Kendo Drop down list positioning issue on scroll of the page?

I am using kendo dropd own. I am facing an issue on scroll of the page when the drop down was opened. Here is the example.

jsfiddle demo

When kendo ui drop down opened try to scroll with the mouse wheel, the kendo dropdown list is detaching from it and moving on the page with the scroll. Is there any fix for this. Either to make it close on scroll or move it with the drop down itself(without detaching from that element).

To produce the scenario in this link:

  1. open the drop down list
  2. Using mouse scroll wheel move the page up/down . List also will move to up and down by detaching from the element

Any help much appreciated. thanks in advance

HTML

<div id="container">
    <p>Scroll down for the KendoDropDownList:</p>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <select id="select">
        <option value="1">item 1</option>
        <option value="2">item 2</option>
        <option value="3">item 3</option>
        <option value="4">item 4</option>
    </select>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

JS

$("#select").kendoDropDownList();

CSS

#container
{
    width:400px;
    height:200px;
    overflow:auto;
    position:fixed;
    top:100px;
    left:50px;
    border:1px solid #666;
}

html
{
    font:12px sans-serif;
}

Upvotes: 2

Views: 6388

Answers (2)

sureshdeepak
sureshdeepak

Reputation: 43

Check this link

On scrolling just enable close event from kendo

http://jsfiddle.net/krustev/cQGrK/

   $(document.body).find("[data-role=popup]").each(function() {
   var popup = $(this).data("kendoPopup");
   popup.close();
   });

Upvotes: 1

Hung Doan
Hung Doan

Reputation: 1167

The code bellow will let your Dropdown-list be closed whenever You try to scroll.

$('#ScrollingBox').scroll(function() {
   $("#YourDropdownListID").data("kendoDropDownList").close();
});

Upvotes: 0

Related Questions