somehow my scheduler controller has a bad appearance (see picture)
Do i need to apply a theme or css class ?
this is my cshtml code:
@(Html.Kendo().Scheduler<SkyApp.Models.CosmosDB.ScheduleViewModel>()
.Name("scheduler")
.StartTime(new DateTime(2019, 1, 1, 6, 00, 00))
.Height(600)
.Width(800)
.Views(views =>
{
views.MonthView(w => w.Selected(true));
views.DayView();
views.WeekView();
views.WorkWeekView();
})
.Timezone("Etc/UTC")
.DataSource(d => d
.Events(e => e.Error("onError"))
.Model(m =>
{
m.Id(f => f.EventId);
m.RecurrenceId(f => f.RecurrenceId);
})
.Read(read => read.Action("Schedules_Read", "Crud"))
.Create(create => create.Action("Schedules_Create", "Crud"))
.Update(update => update.Action("Schedules_Update", "Crud"))
.Destroy(destroy => destroy.Action("Schedules_Destroy", "Crud"))
)
)
4 Answers, 1 is accepted
Can you confirm that there is only one Kendo theme registered on the layout page, and that the files that are registered match the information from the following article: https://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling? Here's an example of the <head> section of a sample project of mine that would not result in such a problem, so you can compare against it or test with it (make sure to fix any broken paths, if you use local resources, I included them as an example only):
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>@ViewData["Title"] - SampleCoreApp</title> <environment include="Development"> <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" /> <link rel="stylesheet" href="~/css/site.css" /> @*<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.common-nova.min.css" /> <link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.nova.min.css" />*@ @* THe kendo stylesheets. This example references them from the CDN *@ <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css" /> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.default.min.css" /> <script src="~/lib/jquery/dist/jquery.js"></script> @* Place Kendo UI scripts after jQuery. This example uses local references for the scripts *@ <script src="~/lib/kendo-ui/js/kendo.all.min.js"></script> <script src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"></script> </environment> <environment exclude="Development"> <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" /> <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" /> <link rel="stylesheet" asp-fallback-href="~/lib/kendo-ui/styles/kendo.common-nova.min.css" asp-fallback-test-class="k-common-test-class" asp-fallback-test-property="opacity" asp-fallback-test-value="0" /> <link rel="stylesheet" asp-fallback-href="~/lib/kendo-ui/styles/kendo.nova.min.css" asp-fallback-test-class="k-theme-test-class" asp-fallback-test-property="opacity" asp-fallback-test-value="0" /> asp-fallback-src="~/lib/jquery/dist/jquery.min.js" asp-fallback-test="window.jQuery" crossorigin="anonymous" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"> </script> @* Place Kendo UI scripts after jQuery *@ asp-fallback-src="~/lib/kendo-ui/js/kendo.all.min.js" asp-fallback-test="window.kendo"> </script> asp-fallback-src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js" asp-fallback-test="kendo.data.transports['aspnetmvc-ajax']"> </script> </environment></head>If you keep having the same problem, it is possible that another view registers extra stylesheets, or that some CSS rules from the site-specific stylesheet are causing the problem. To resolves such a case, start removing bits and pieces from the view and/or custom styles to see when the issue stops manifesting.
Regards,
Marin Bratanov
Progress Telerik
Rank 1
Thanks for your comment - it works perfect in Visual studio debugger (include="Development ?)
But when I publish to Azure, I still have have the ugly styling - can you review my exclude="Development"> section ?
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - ?????s</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
@*<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.common-nova.min.css" />
<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.nova.min.css" />*@
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
crossorigin="anonymous"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" />
<link rel="stylesheet"
href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common-nova.min.css"
asp-fallback-href="~/lib/kendo-ui/styles/kendo.common-nova.min.css"
asp-fallback-test-class="k-common-test-class"
asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
<link rel="stylesheet"
href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.nova.min.css"
asp-fallback-href="~/lib/kendo-ui/styles/kendo.nova.min.css"
asp-fallback-test-class="k-theme-test-class"
asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
</environment>
<link rel="stylesheet" href="~/css/site.css" />
<link href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.bootstrap-v4.min.css" rel="stylesheet" type="text/css" />
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.aspnetmvc.min.js"></script>
</head>
I see that you have the SASS Bootstrap theme (kendo.bootstrap-v4.min.css) outside of the <environment> settings, which means that it will always be fetched. The Kendo stylesheets in the Development section are commented out, so they won't be fetched. You must remove them, and also the Kendo styles from the exclude=Development section because in production the LESS Nova theme there will be fetched and cause problems. Here's how the provided snippet should look like:
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>@ViewData["Title"] - ?????s</title> <environment include="Development"> <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" /> </environment> <environment exclude="Development"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" crossorigin="anonymous" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" /> </environment> <link rel="stylesheet" href="~/css/site.css" /> <link href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.bootstrap-v4.min.css" rel="stylesheet" type="text/css" /> <script src="https://kendo.cdn.telerik.com/2019.1.115/js/jquery.min.js"></script> <script src="https://kendo.cdn.telerik.com/2019.1.115/js/jszip.min.js"></script> <script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script> <script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.aspnetmvc.min.js"></script></head>Considering that only Bootstrap is now fetched differently, you may want to unify that as well and only keep the CDN version, so you could remove the <environment> elements altogether.
Regards,
Marin Bratanov
Progress Telerik
Rank 1