We have a Kendo and AngularJS app that has a kendo menu at the top, tabs below that (our own custom tabs, k-buttons actually) and finally, a view container that holds whatever view we need to put into it according to whatever tab the user is on. In several of our tabs we have Kendo Grids and on one of these grids we have a right-click Context Menu. The problem is that the menu comes up at the wrong place. It's top is lower than expected, and it exactly matches the amount of the menu and tab system that we have at the top of the page, 88px.
When I remove all of the position relative CSS statements, the context menu behaves properly but all of the dropdownlists and and comboboxes have their list container (or whatever its called, the part that opens when you click on them) displayed 88px too high (as opposed to too low on the context menu).
We are using the latest stable version of Kendo UI Pro (with an active subscription) but we were having this problem with older versions too.
I've done some debugging on Kendo's code using the kendo.all.js file and Chrome Dev Tools. I can see that the _showHandler function event argument at line 35976 shows a pageY that is 88px different from the screenY. This doesn't tell us all that much, except that the pageY is what gets used and its 88px too low. It's almost like the reference point for the context menu is the last relative container and doesn't account for elements that have height and are contained inside other divs/containers further up the lineage.
We've been unable to duplicate this problem in Dojo. However, I do have a Dojo setup that you can look at to see roughly what we are doing. In this particular Dojo, I can't even get the Context Menu to work at all. It appears something isn't wired up right but I haven't been able to spot the problem and its now 6PM Friday evening so time to go home from work. http://dojo.telerik.com/@villagemedia/UkOCu/10