Offset applied when menu moved on border collision detection

[Andrew]

We have a menu where the items appear with an offest of X = -15 and Y = 20. Just below and inward slightly from the right edge of the hovered item... However, when the window is shrunk, so the menu will collide with the edge of the browser, and is therefore repositioned to the left, the offset is applied from the RIGHT edge of the popup, so there is then a gap between the hovered item and the popup menu. We have a very small collapse delay, so when you move over this gap, the menu closes.

you can duplicate this behaviour on your own demo at http://demos.telerik.com/aspnet-ajax/menu/examples/functionality/offsetingthegroups/defaultcs.aspx

Set the offset X to -15.

Now - when you hover over an item in the first menu, as expected, the popup appears indented to the left. However, shrink the window down so that the popup menu hasn't got enough room, and then pop it up. It appears to the left, with a 15px gap between it and the original menu.

This is probably by design, but I'd have though that the X offset wouldnt apply when the menu is flipped to the other side due to edge detection. The Y axis, maybe, but not the X axis.

Is there any clever workaround I can do? I can't see any client side code I can leverage to detect if a menu is being popped up on the opposite side...

[Kate]

Hello Andrew,

Try setting the EnableScreenBoundaryDetection property to false. Thus the dropdown will always appear at the assigned offset.

Regards,
Kate
the Telerik team

[Andrew]

Hmm - that is an option, but we still want the collision detection. We've works around it in a different way, by showing the menu in the Down direction rather than Right. This way, the minus offset isn't used any more, and the collision detection doesnt move the popup menu away from the root item.

[Kate]

Hi Andrew,

I am glad you could workaround the issue. Let me know if you have any other questions.

All the best,
Kate
the Telerik team