Positioning issue when DropDownList is near bottom of page

[Ryan]

Hi, I believe I have found a bug in the DropDownList when it is near the bottom of the page and opens upward.  To see an example, go to this JSFiddle:

http://jsfiddle.net/7LCr4/1/

Click the dropdown once, close it, click it again, and observe that the popup is now offset incorrectly to the left.

Investigation of the issue revealed that the problem seems to be that there is a vertical scrollbar that appears temporarily as the dropdown is opening, the second and subsequent times it is opened.  This causes the 'left' CSS property of the popup to be incorrect by the width of the scrollbar, because the scrollbar eventually disappears again.

More specifically, on line 12173 of kendo.web.js (v2012.2.710) -- in Popup.open() -- the kendo.wrap() call adds a .k-animation-container div that is pointing down, which is what causes the vertical scrollbar to appear (place a breakpoint there to see this).  This pushes the .k-widget "anchor" over to the left so that when the popup's 'left' property is set in Popup._align(), it is offset by the width of the temporary scrollbar.

It isn't until line 12408 in Popup._position() that the .k-animation-container is finally flipped vertically and the scrollbar disappears again -- but at that point it's too late because the popup's positioning has been set.

Note that the reason this does not happen the very first time the popup is opened is because its default coordinates are 0,0.  After the first open, the coordinates are changed to those of the widget/anchor down in the lower right of the page.

Let me know if you have any questions, and/or have a solution or workaround we can use to avoid this issue.  Thanks!

ryan

[Ryan]

I figured out a way to work around this bug by overriding DropDownList and open() as follows:

open: function () {
    this.popup.wrapper.css({
        top: 0,
        left: 0
    });
    kendo.ui.DropDownList.prototype.open.apply( this );
}

In other words, we reposition the popup wrapper up to 0,0 before it opens (effectively mimicking the initial open every time).

So we are now able to proceed past this issue in our project, but it still seems like a bug in Kendo UI that should be addressed.  Thanks,

ryan

[Daniel]

Hello Ryan,

Thank fro the sample and bringing our attention to this problem. We will look into it and I will write again as soon as there is more information.

Regards,
Daniel
the Telerik team

[Kamau]

Has this been officially solved? I am using Kendo UI v2018.1.221 for Asp.Net Core and I am still seeing the same issue.     

[Ivan Danchev]

Hello Kamau,

We discussed this in a separate support ticket, but I will also add this information here in case someone else is facing the same behavior.

Currently the only known issue that causes dropdown misplacement is due to a bug in jQuery 2.2.0. More details on it can be found in this Github issue. Upgrading jQuery to 2.2.1 or a newer supported version should fix the dropdown positioning problem.

Greetings,
Ivan Danchev
the Telerik team

 

 

[Kamau]

Thank you Ivan. Upgrading the JQuery version solved the problem.