Responsive Panel is scrolling

0 Answers 36 Views
ResponsivePanel
SUNIL
Top achievements
Rank 2
Iron
Iron
Iron
SUNIL asked on 18 Aug 2024, 08:37 AM | edited on 27 Aug 2024, 12:49 PM

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>

SUNIL
Top achievements
Rank 2
Iron
Iron
Iron
commented on 18 Aug 2024, 09:19 AM | edited

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

Neli
Telerik team
commented on 30 Aug 2024, 10:01 AM

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.

SUNIL
Top achievements
Rank 2
Iron
Iron
Iron
commented on 31 Aug 2024, 08:04 PM

Sure, go ahead and include it in the knowledge base.

Thanks 

Sunil

Neli
Telerik team
commented on 05 Sep 2024, 05:32 AM

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

 

No answers yet. Maybe you can help?

Tags
ResponsivePanel
Asked by
SUNIL
Top achievements
Rank 2
Iron
Iron
Iron
Share this question
or