How to align the "options" to the "select" of kendo dropdownlist?

Question

I'm using the kendo ui dropdownlist and I noticed that the options do not align with the select when the select is cut off from the viewport. This is what happens:

enter image description here

Is there any way to make the options align with the select in this scenario? I want the options to be cut off from the screen also.

Thank you!

PS: The kendo dropdown can be seen here: http://demos.kendoui.com/web/dropdownlist/events.html

Can you provide jsfiddle link to your code with the issue in question? — Nitesh, Dec 17 '13 at 06:43
@NathanLee i just provided the demo for the kendo ui dropdownlist — dork, Dec 17 '13 at 06:49
But that is aligning fine, But I need to know the issue in your code that is not allowing it to align properly - @dork — Nitesh, Dec 17 '13 at 06:56
@NathanLee resize your browser window to mimic the picture I attached in my question :) — dork, Dec 17 '13 at 07:25

Lars Höppner · Answer 1 · 2013-12-23T04:40:31.727

Well - it's not a bug, it's a feature.

You'd have to rewrite the _position method in the Popup widget (kendo.ui.popup).

Alternative: I came across this in another context; you can prevent the dropdown from changing position by setting kendo.ui.Popup.fn.options.collision to false (this will affect all widgets which use Popup):

kendo.ui.Popup.fn.options.collision = false;

var data = [{
    text: "Item1",
    value: "1"
}, {
    text: "Item2",
    value: "2"
}, {
    text: "Item3",
    value: "3"
}];

$("#dropdownlist").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: data
});

(demo)

How to align the "options" to the "select" of kendo dropdownlist?

1 Answers1