I am seeing an issue with the Kendo Responsive Panel component. There is a Kendo Menu inside the responsive panel, but when displaying the horizontal menu its showing horizontal and vertical scroll bars when hovering over the menu item that says Foo, and also its not showing the menu group item since the height of the responsive panel is limited to the initial height of the horiontal menu. I am using Kendo UI jQuery R2 2020. The code I have is as given below. The dojo sample can be seen at https://dojo.telerik.com/@sun21170/uPisoRoW
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Kendo UI Responsive Panel is scrolling for a menu inside it</title>
<link rel="stylesheet" href="Styles/kendoUIMVC/kendo.common.min.css">
<link rel="stylesheet" href="Styles/kendoUIMVC/kendo.rtl.min.css">
<link rel="stylesheet" href="Styles/kendoUIMVC/kendo.moonlight.min.css">
<link rel="stylesheet" href="Styles/kendoUIMVC/kendo.mobile.all.min.css">
<script src="Scripts/kendoUIMVC/jquery.min.js"></script>
<script src="Scripts/kendoUIMVC/kendo.all.min.js"></script>
</head>
<body>
<nav id="nav1">
<button class="k-button" id="btnMenuToggle" data-role="button" role="button" aria-disabled="false" tabindex="0"><span class="km-icon km-drawer-icon"></span></button>
<div id="sidebar">
<ul id="mainMenu"></ul>
</div>
</nav>
<script>
$(document).ready(function() {
$("#sidebar")
.kendoResponsivePanel({
breakpoint: 769,//have this more than 768 since if its 768 then responsive panel will not display at screen width >= 768 rather than screen width > 768
orientation: "left",
toggleButton: "#btnMenuToggle"
})
.children("#mainMenu").kendoMenu({
orientation: ($(window).width() > 768 ? "horizontal" : "vertical"),
direction: "bottom left",
dataSource: [
{
text: "Foo", items: [
{text: "Qux ddsd sdsdsd dsdsd sdddsdds sdsdsd dsdsdsdsd zzz"},
{text: "Hi Abc! ddsd sdsdsd dsdsd sdddsdds sdsdsd dsdsdsdsd zzz"},
{text: "Hi Klm! ddsd sdsdsd dsdsd sdddsdds sdsdsd dsdsdsdsd zzz"},
{text: "Hi Xyz! ddsd sdsdsd dsdsd sdddsdds sdsdsd dsdsdsdsd zzz"}
]
},
{text: "Bar"}
]
});
});
</script>
</body>
</html>
If I add the following css to the responsive panel, then the problem goes away. Currently, the Kendo UI framework sets it to overflow:auto which causes the problem of scrollbars appearing for the responsive panel.
overflow: visible
Hi Sunil,
Thank you for suggesting a solution to the issue. Such additional modifications might be needed in scenarios with nested components.
If you don`t mind I would like to include the example in our Knowledge Base section, thus it could be helpful to the other users with similar issues.
Looking forward to your reply.
Sure, go ahead and include it in the knowledge base.
Thanks
Sunil
Hi Sunil,
Just for your inormation - the article will be published shortly on the following link - https://docs.telerik.com/kendo-ui/knowledge-base/prevent-scrollbars-kendo-ui-responsive-panel
Regards, Neli