Progress® Kendo UI® for jQuery Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 17 Jul 2024 10:21 by ADMIN
Release 2024 Q3 (Aug)
Felix
Created on: 03 Apr 2024 12:17
Category: Menu
Type: Bug Report
0
Scrollbar in submenu in Scrollable Menu not present

Bug report

Scrolling submenu in Scrollable Menu not available in 2024.1.319

Regression with v.2024.1.319

Reproduction of the problem
Open this Dojo example - https://dojo.telerik.com/aweLUguB
Hover over "Mens"

Expected/desired behavior
Scrollbar shall be rendered so user can scroll over the list items

Environment
Kendo UI version: 2024.1.319
Browser: [all]

7 comments
ADMIN
Georgi Denchev
Posted on: 17 Jul 2024 10:21

Hello, Anita,

I apologize, I may have caused some confusion with my previous reply so I'll try to reiterate it.

The menu has two scrollable modes - true and false.

When scrollable is set to false, the browser renders its own scrollbar that can be used to scroll the popup.

When scrollable is set to true, the correct behavior of the component is to render the two arrows inside the popup that allow the user to scroll the content:

The bug that is currently present in the component is that these arrows are not showing thus preventing the user from scrolling the popup, even though you've enabled the scrollable property.

That is what the fix will remedy.

Best Regards,
Georgi Denchev
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources! 
Anita
Posted on: 10 Jul 2024 12:56
We cannot turn off the scrollbar due to a fairly large main and sub menus that will not fit in the 14 inch laptop screens. 
ADMIN
Georgi Denchev
Posted on: 08 Jul 2024 07:59

Hello,

I just wanted to inform you that the fix for the bug is awaiting testing. If everything is okay, the fix should be available with the next release.

One more thing that I must mention is that the if you wish for a scrollbar to be rendered, the "scrollable" property must be set to false.

The "scrollable" property is meant to render scroll buttons inside the popup and this is not happening at the present. After the fix, the result will be similar to the following image:

The two buttons can be used to scroll the list, not a separate scrollbar. I am mentioning this to clear any misunderstandings of what you can expect once the problem is patched.

Best Regards,
Georgi Denchev
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources! 
Felix
Posted on: 02 Jul 2024 16:47

Hi

When I edit your sample https://demos.telerik.com/kendo-ui/menu/scrollable in Dojo to have more menu entries in the mens menu like this:


<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/menu/scrollable">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link href="https://kendo.cdn.telerik.com/themes/7.2.1/default/default-main.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    
    <script src="https://kendo.cdn.telerik.com/2024.1.319/js/kendo.all.min.js"></script>
    
    
</head>
<body>
    <div id="example">
    <div class="demo-section">
        <h4>Horizontal</h4>
        <ul id="horizontalMenu">
            <li>
                Mens
                <ul>
                    <li>Jackets and Coats</li>
                    <li>Jeans</li>
                    <li>Knitwear</li>
                    <li>Shirts</li>
                    <li>Belts</li>
                    <li>Socks</li>
                    <li>Fan Zone</li>
                    <li>Jackets and Coats</li>
                    <li>Jeans</li>
                    <li>Knitwear</li>
                    <li>Shirts</li>
                    <li>Belts</li>
                    <li>Socks</li>
                    <li>Fan Zone</li>
                    <li>Jackets and Coats</li>
                    <li>Jeans</li>
                    <li>Knitwear</li>
                    <li>Shirts</li>
                    <li>Belts</li>
                    <li>Socks</li>
                    <li>Fan Zone</li>
                    <li>Jackets and Coats</li>
                    <li>Jeans</li>
                    <li>Knitwear</li>
                    <li>Shirts</li>
                    <li>Belts</li>
                    <li>Socks</li>
                    <li>Fan Zone</li>
                    <li>Jackets and Coats</li>
                    <li>Jeans</li>
                    <li>Knitwear</li>
                    <li>Shirts</li>
                    <li>Belts</li>
                    <li>Socks</li>
                    <li>Fan Zone</li>
                    <li>Jackets and Coats</li>
                    <li>Jeans</li>
                    <li>Knitwear</li>
                    <li>Shirts</li>
                    <li>Belts</li>
                    <li>Socks</li>
                    <li>Fan Zone</li>
              </ul>
            </li>
            <li>
                Ladies
                <ul>
                    <li>Jackets and Coats</li>
                    <li>Jeans</li>
                    <li>Knitwear</li>
                    <li>Shirts</li>
                    <li>Belts</li>
                    <li>Socks</li>
                    <li>Fan Zone</li>
                </ul>
            </li>
            <li>
                Kids
                <ul>
                    <li>Jackets and Coats</li>
                    <li>Jeans</li>
                    <li>Knitwear</li>
                    <li>Shirts</li>
                    <li>Belts</li>
                    <li>Socks</li>
                    <li>Fan Zone</li>
                </ul>
            </li>
            <li>Sports</li>
            <li>Brands</li>
            <li>Accessories</li>
            <li>Promotions</li>
            <li>Contacts</li>
            <li>About us</li>
        </ul>

        <h4 style="padding-top:2em; margin-top:30px">Vertical</h4>

        <ul id="verticalMenu" style="width:150px; height:150px;">
            <li>
                Mens
                <ul>
                    <li>Jackets and Coats</li>
                    <li>Jeans</li>
                    <li>Knitwear</li>
                    <li>Shirts</li>
                    <li>Belts</li>
                    <li>Socks</li>
                    <li>Fan Zone</li>
                </ul>
            </li>
            <li>
                Ladies
                <ul>
                    <li>Jackets and Coats</li>
                    <li>Jeans</li>
                    <li>Knitwear</li>
                    <li>Shirts</li>
                    <li>Belts</li>
                    <li>Socks</li>
                    <li>Fan Zone</li>
                </ul>
            </li>
            <li>
                Kids
                <ul>
                    <li>Jackets and Coats</li>
                    <li>Jeans</li>
                    <li>Knitwear</li>
                    <li>Shirts</li>
                    <li>Belts</li>
                    <li>Socks</li>
                    <li>Fan Zone</li>
                </ul>
            </li>
            <li>Sports</li>
            <li>Brands</li>
            <li>News</li>
            <li>About us</li>
        </ul>
    </div>
</div>

<script>
    $(document).ready(function() {
        $("#horizontalMenu").kendoMenu({
            scrollable: true
        });

        $("#verticalMenu").kendoMenu({
            scrollable: true,
            orientation: "vertical"
        });
    });
</script>

<style>
    .k-menu-scroll-wrapper.horizontal li.k-item.k-last {
        border-right-width: 0;
    }
</style>


</body>
</html>

the scrolling of the Mens submenu is not working in the latest library. In the libraries before it is working as expected. Can you please give an advice how to fix this problem?

Thank you!

Felix

Anita
Posted on: 02 Jul 2024 16:36
I do not have access to the ticket number 1647137
Felix
Posted on: 01 Jul 2024 14:13
If you take the time to look through my ticket 1647137 which describes the bug, you will see that I gave a comprehensible example of the problem in my initial message on 2 April.
Anita
Posted on: 01 Jul 2024 12:50
Could you please provide some line of codes or sample project to follow.
Create an account Log In
View
Type
Status
Category