Kendo Menu - scrollable while items centered

[Daniel]

Hey guys,

in my project i'm using a horizontal kendo menu for navigation through the app. Since the page has to be responsive I have to enable the scroll feature. I do prefer the centered styling and here I'm running into an issue.

<div style="display: flex; flex-flow: column;">
	<nav>
		<kendo-menu name="menuNavigation" style="justify-content: center;">
			<scrollable enabled="true" />
			<items>
				<menu-item text="@Namings.Request stellen">
					<sub-items>
						<menu-item text="@Namings.CustomerDepartment"></menu-item>
						<menu-item text="@Namings.CustomerPrivatPerson"></menu-item>
						<menu-item text="@Namings.CustomerClub"></menu-item>
					</sub-items>
				</menu-item>
				<menu-item text="@Namings.OpenRequests"></menu-item>
				<menu-item text="Laufende @Namings.Data.Loans"></menu-item>
				<menu-item text="Fahnenlager"></menu-item>
				<menu-item text="Kundendaten">
					<sub-items>
						<menu-item text="Personen">
							<sub-items>
								<menu-item text="@Namings.Crud.Read"></menu-item>
								<menu-item text="@Namings.Crud.Create"></menu-item>
								<menu-item text="@Namings.Crud.Update"></menu-item>
								<menu-item text="@Namings.Crud.Delete"></menu-item>
							</sub-items>
						</menu-item>
						<menu-item text="@Namings.CustomerClubs">
							<sub-items>
								<menu-item text="@Namings.Crud.Read"></menu-item>
								<menu-item text="@Namings.Crud.Create"></menu-item>
								<menu-item text="@Namings.Crud.Update"></menu-item>
								<menu-item text="@Namings.Crud.Delete"></menu-item>
							</sub-items>
						</menu-item>
					</sub-items>
				</menu-item>
				<menu-item text="Einstellungen">
					<sub-items>
						<menu-item text="Fahneneinstellungen & Preise"></menu-item>
						<menu-item text="Archivierte @Namings.Data.Loans"></menu-item>
					</sub-items>
				</menu-item>
			</items>
		</kendo-menu>
	</nav>
</div>

When the screen has smaller sizing, the left items of the menu will disappear without showing the scroll-to-the-left button. Scrolling to the right is still working. But the first items will be not reachable again.

This behaviour is caused by the marked line "justify-content: center". It enables that the menu items are centered but the scrolling functionality will be not working properly anymore.

I'm not the greatest css programmer, do you have an idea how to enable proper working scrolling for centered menu items?

[Stoyan]

Hi Daniel,

Thank you for the provided details about the scenario.

The justify-content:center; property breaks the alignment of Component because it flexbox properties are used internally to position the menu items. 

Therefore to avoid the issue I would suggest you to explicitly set a width to the wrapper element of the Menu and than set the margin to auto:

    .k-menu-scroll-wrapper{
        width:300px;
        margin:auto;
    }

You can review the behavior of the above in this Telerik REPL. To utilize this approach different screen sizes you can use Media Queries.

Regards,
Stoyan
Progress Telerik

[Daniel]

Thanks for response and the provided solution.

I have an alternative idea to set the width of the widget dynamicly with resizing the browser size but have to ask you if there is an option to set the width manually of the kendo menu. My approach looks like that:

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

	.k-menu-scroll-wrapper {
		width: 300px;
		margin: auto;
	}
</style>

$(window).resize(function () {
      $('.k-menu-scroll-wrapper').width($(window).width());
});

But currently while resizing the window the width is always been resetted to the initial 300px set at the beginning. Any ideas?

[Stoyan]

Hi Daniel,

To programmatically change the width of the Menu there are 2 possible approaches:

Trigger the resize event of the elements suggested in the Kendo menu has no proper resize method GitHub issue

1. Get the client-side instance of the Menu in the window resize handler
2. Define a resizeMenu function to employ the solution provided in the GitHub issue

Because the approach triggers a resize event in the resize event handler this will lead to recursion. To workaround that define a global boolean resize. In the resize handler only call the resizeMenu function, if the global variable is true. 

To enable a second resize set the resize variable to true after a set timeout.

 var resize = true;
    $(window).resize(function () {
       var menu = $("#menu").data("kendoMenu");
        if(resize){
            resize=false;
            menuResize();
            setTimeout(function(){
                resize = true;
            }, 5000);
        }
   });
   function menuResize(){
       var menu = $("#menu").data("kendoMenu");
        menu.element.width(200).trigger("resize");
        menu.element.parent().width(200).trigger("resize");
        menu.resize(true)
   }

Use the internal _initOverflow method of the Menu

$(window).resize(function () {
       var menu = $("#menu").data("kendoMenu");
       menu.element.width(200);
       menu.element.parent().width(200);
       menu._initOverflow(menu.options);
   });

This way the width of the Menu is reevaluated and set internally after it has been changed with jQuery. The approach is more straightforward but internal methods can be changed without notice in future releases and this could unexpectedly break the functionality.

For this reason I have submitted a Feature Request to implement a width or resize method for the Menu on your behalf. We determine what features to implement in the future based on the community interest in them. You can follow this request in our Public Portal here.

Finally, for your convenience I have applied the 2 approaches I've suggested above in this Telerik REPL.

I hope the information above is useful.

[Daniel]

Thank you for your effort, that seems interesting! Also, thanks for the created feature request. Will follow the progress of it.

[Daniel]

So at the end I've found a solution. The most important part was the provided dojo in the github issue. The idea from this dojo was simple to change the width of the upper container over the menu and let the menu as it is.

<style>
	nav {
		overflow: hidden;
	}
</style>
<nav class="m-auto w-100" style="max-width: 824px;">
	<kendo-menu name="menuNavigation">
		...
	</kendo-menu>
</nav>

• max-width:
  824px is the fully width of my menu without scrolling bars, so I've set the upper element width as maximum for.. ->
• m-auto (margin: auto):
  Makes it possible to center an element without flex. So when my screen width is wider than my nav/menu (because it's limited to 824px) it will be centered in screen.
• w-100 (width: 100%):
  If my window screen is smaller than 824px, the width of the nav element will now decrease. Decreasing the upper element over the menu will ensure that the scrolling bars of the menu will appear.
• overflow: hidden:
  Ensures that the menu don't need a set width. Everything what's behind the 824px will now be hidden.

// Set the width for nav element by the size of the browser width.
function setNavigationWidth() {
	$('nav').width($(window).width());
}

// Ensure that the correct width is set for the nav element after loading the page.
$(function () {
	setNavigationWidth();
});

// Change the width of the nav element when resizing the browser window.
$(window).resize(function () {
	setNavigationWidth();
});

For JS I wrote the comments. In summary they're needed to change the nav width to the current browser width.

Maybe somebody else will have the same issue like me and could find a solution in my answer here.

Thanks for helping!

Regards,
Daniel

[Daniel]

So at the end I've found a solution in help with Stoyan (thanks for your support!). The most important part was the provided dojo in the github issue. The idea from this dojo was simple to change the width of the upper container over the menu and let the menu as it is.

<style>
	nav {
		overflow: hidden;
	}
</style>
<nav class="m-auto w-100" style="max-width: 824px;">
	<kendo-menu name="menuNavigation">
		...
	</kendo-menu>
</nav>

• max-width:
  824px is the fully width of my menu without scrolling bars, so I've set the upper element width as maximum for.. ->
• m-auto (margin: auto):
  Makes it possible to center an element without flex. So when my screen width is wider than my nav/menu (because it's limited to 824px) it will be centered in screen.
• w-100 (width: 100%):
  If my window screen is smaller than 824px, the width of the nav element will now decrease. Decreasing the upper element over the menu will ensure that the scrolling bars of the menu will appear.
• overflow: hidden:
  Ensures that the menu don't need a set width. Everything what's behind the 824px will now be hidden.

// Set the width for nav element by the size of the browser width.
function setNavigationWidth() {
	$('nav').width($(window).width());
}

// Ensure that the correct width is set for the nav element after loading the page.
$(function () {
	setNavigationWidth();
});

// Change the width of the nav element when resizing the browser window.
$(window).resize(function () {
	setNavigationWidth();
});

For JS I wrote the comments. In summary they're needed to change the nav width to the current browser width.

Maybe somebody else will have the same issue like me and could find a solution in my answer here.

Thanks for helping!

Regards,
Daniel

[Stoyan]

Hi Daniel,

I am happy that issue has been resolved.

Thank you for sharing your approach with us!