Issue with CSS in ASP.NET MVC Template

1 Answer 229 Views
Button DropDownList
Justin
Top achievements
Rank 1
Justin asked on 24 Dec 2021, 07:43 PM | edited on 24 Dec 2021, 07:43 PM

I'm following this video tutorial:

https://learn.telerik.com/learn/course/external/view/elearning/3/telerik-ui-for-aspnet-mvc


My application does not appear to be rendering Kendo CSS properly. 

Here is my BundleConfig.cs

    public class BundleConfig
    {
        // For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js"));

            bundles.Add(new ScriptBundle("~/bundles/kendojs").Include(
                        "~/Scripts/kendo/2021.3.1207/kendo.all.min.js",
                        "~/Scripts/kendo/2021.3.1207/kendo.aspnetmvc.min.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/styles/site.css"));

            bundles.Add(new StyleBundle("~/Content/kendocss").Include(
                      "~/Content/kendo/2021.3.1207/kendo.default-v2.min.css"));

            bundles.Add(new StyleBundle("~/Content/dashboardcss").Include(
                "~/Content/styles/dashboard.css"));

            bundles.Add(new StyleBundle("~/Content/backlogcss").Include(
                "~/Content/styles/backlog.css"));

            bundles.Add(new StyleBundle("~/Content/detailcss").Include(
                "~/Content/styles/detail.css"));
        }

 

Here is the head tag in my _Layout.cshtml:


<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RPS Project Tracker</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/Content/kendocss")
    @Scripts.Render("~/bundles/modernizr")
    @RenderSection("styles", required: false)
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")

    @Scripts.Render("~/bundles/kendojs")

    @Html.Kendo().DeferredScripts()
    @RenderSection("scripts", required: false)
</head>

Here's some examples of the errors in my UI:

in /Backlog/{id}/Details view, my DropDownListFor has no styling attributes:

 

On the Dashboard and Backlog pages, my buttons have broken styling:

Inside DevTools, I'm getting the following error:

 

Any help sorting this out is greatly appreciated.

 

 

1 Answer, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 29 Dec 2021, 08:14 AM

Hello Justin,

 

Thank you for writing to us.

There is a line in the definition which reads:

@Scripts.Render("~/Content/kendocss")

But I suppose it needs to be:

@Styles.Render("~/Content/kendocss")

That should resolve the issue. For your convenience, I am also sending a full working MVC project with CDN references.

 

Regards,
Eyup
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Button DropDownList
Asked by
Justin
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Share this question
or