Stylesheet problem using common css with menus and tabstrips

[Richard]

Good afternoon,

I am using the latest version of Telerik ASP.NET Core (2022.1.119).

I am using the classic opal theme on my site. I have a responsive menu which collapses to the hamburger.

If I reference the common css file first the menus don't wrap correctly when the page width is reduced.

    <link rel="stylesheet" href="~/lib/kendo/css/kendo.common.min.css" />
    <link rel="stylesheet" href="~/lib/kendo/css/kendo.classic-opal.min.css" />

This configuration gives this:

Switching the configuration so that common css is after the classic opal theme makes it work:

However, having the common css second breaks the tabstrips - the outer borders of the tab no longer display, only the header tabs:

If I'm using kendo.classic-opal.min.css do I also need to use kendo.common.min.css, and if I do, why does this break the tabstrip? Apart from site.css, is there another css I need to reference?

Kind regards,

Richard

[Mihaela]

Hi Richard,

Thank you for the provided screenshots.

The Kendo UI Classic Opal Theme is a Sass-based theme and the common CSS file is required for the Less-based themes. In case a Less-based theme is used, the common file should be registered before the theme CSS file.

With that said, would you please remove the common CSS file and let me know if the appearance issues are resolved at your end?

The client-side resources should be registered in the "_Layout.cshtml" in the following order:

	<link href="https://cdn.kendostatic.com/2022.1.119/styles/kendo.classic-opal.min.css" rel="stylesheet" type="text/css" />
	<script src="https://cdn.kendostatic.com/2022.1.119/js/jquery.min.js"></script>
	<script src="https://cdn.kendostatic.com/2022.1.119/js/jszip.min.js"></script>
	<script src="https://cdn.kendostatic.com/2022.1.119/js/kendo.all.min.js"></script>
	<script src="https://cdn.kendostatic.com/2022.1.119/js/kendo.aspnetmvc.min.js"></script>

<!--Custom CSS files are below -->

Regards, Mihaela Progress Telerik

[Richard]

Hi Mihaela,

Many thanks for your reply and helping me to understand what css files are required.

I tried what you said, i.e. include just the one stylesheet kendo.classic-opal.min.css, and the tabstrips now appear correctly. The hamburger button however still doesn't display correctly - the menus continue to stretch across the screen instead of wrapping.

When I looked at the file for classic opal it seems that the .k-menu flex-wrap is set to nowrap, whereas in other css files it seems to be set to flex-wrap: wrap. e.g. in kendo.default-main.min.css:

Is this the cause of the problem?

Kind regards,

Richard

[Stoyan]

Hi Richard,

Upon investigation the issue turned out to be caused by a styling property set up by default with our Template projects in the wwwroot/css/site.css file:

    .k-menu .k-item,
    .k-menu .k-link {
        width: 100%;
    }

Removing the styling above will fix the reported issue.

Hopefully the information above is useful.

[Richard]

Hi Stoyan,

The wwwroot/css/site.css file that was created in Visual Studio 2019 using the Telerik ASP.NET Core MVC Application template doesn't contain any styling for .k-menu.

I've found the only way to get the menus to wrap is to include the following in _Layout.cshtml:

    <style>
        .k-menu {
            flex-wrap: wrap;
        }
    </style>

Whilst this does allow the menu to wrap:

It doesn't allow it to stack, which would be preferred:

I'm using the following code to generate the header and menu:

<nav class="navbar navbar-inverse navbar-fixed-top p-3 light bg-white border-bottom box-shadow mb-3">
    <div class="container p-0 p-sm-3">
        <div class="navbar-header">
            <kendo-button name="configure" tag="button" icon="menu" class="k-rpanel-toggle k-primary btn-toggle"></kendo-button>
            <a asp-controller="Home" asp-action="Index" class="navbar-brand">My Website</a>
        </div>
        @await Component.InvokeAsync(typeof(MenuItemsViewComponent))
    </div>
</nav>

Kind regards,

Richard

[Stoyan]

Hi Richard,

To change the Menu's orientation to vertical, I would suggest you to get the client-side instance of the Component and pass the the "vertical" orientation option, if the user's window is smaller than the specified page breakpoint:

var menu = $("#menu").data("kendoMenu");
menu.options.orientation = "vertical"

Please let me know should further questions on the topic arise.