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.
We have numerous wrapper divs to make all this work as well as multiple controllers in descending fashion. An AppController at the top, a TabController next to handle our tab system, and finally the individual controllers that handle each tab. All our wrapper divs are set to width: 100% and height: 100% with position relative, except the one that holds the tab content, which has a height of something like calc(100% - 88px). (In reality, it's height gets set by Javascript on the Window resize event.)
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
1 Answer, 1 is accepted
The issue that you are observing is most likely due to your page styles and the fact that the context menu container renders within the "body" element. Could you please inspect the applied styles to the wrapping "k-animation-container" corresponding to the context menu and see if there is some margin or padding applied to it from your custom styles.
Please have in mind that without an example that replicates the issue it will be impossible to pinpoint the exact cause of the problem, so currently I could only suggest that you try to isolate the issue in simplified scenario.
Best Regards,
Konstantin Dikov
Telerik