Display Issues

[AP]

I'm experimenting with the scheduler to display some log entries from one of our applications (events with a start / end date  - and although I can display the events, the time bands aren't lining up with the events.

The upshot of this is that events happening at 11pm, are showing up in the 8pm band, due to the slippage.

I've attached a screenshot.

The definition is:-

@{
    DateTime startDate = ViewBag.InitialDate;
    DateTime startTime = ViewBag.StartTime;

@(Html.Kendo().Scheduler<LogBuddy3.Models.SchedulerEvt>()
    .Name("scheduler")


      .Date(startDate)
    .StartTime(startTime)

     .Height(600)
     .Views(views=>
    {
        views.DayView();
        views.WeekView();
        views.AgendaView(av=>av.Selected(true));

    })

        .Editable(false)


        .BindTo(Model)

    )

}

Thanks

[Vladimir Iliev]

Hi Andrew,

I tried to reproduce the problem locally but to no avail – everything is working as expected on our side. Could you please provide runable project where the issue is reproduced? This would help us pinpoint the exact reason for this behavior.

Kind Regards,
Vladimir Iliev
Telerik

[AP]

Thanks for this.

I just created a new project using the Kendo UI for MVC Web Application template  (and then added the culture script in).

Also, when I view the page in Chrome, it looks even worse!

Attached is the sample project.

[Vladimir Iliev]

Hi Andrew,

 
After reviewing the provided project it seems that current behavior is related to custom CSS styles included to the page - after removing the Site.css file from the Layout page, the Scheduler start working as expected (this CSS file contains custom styles for table elements which overrides the KendoUI Scheduler styles resulting in invalid rendering of the widget). 

Kind Regards,
Vladimir Iliev
Telerik

[Erik]

Vladimir,
Did you isolate what "Custom css style" elements were causing this? I am having the same problem, and my css file is massive. Any thoughts/direction on which way to go?

[AP]

Thanks for this.

I removed the css styles for table, from the site.css file, and the misalignment issues have gone.

The week and day views still appear squashed in Chrome - this happens with your demo example as well.

[Dimo]

Hello,

The offending styles in Site.css with regard to the Scheduler are:

table {
    border-collapse: collapse;
    margin-top: 0.75em;
}

th {
    font-size: 1.2em;
}

The above CSS rules apply custom styles globally, which is not a good practice.

We have already modified our own stylesheets, so that the table styles above do not break the Scheduler. Changes will take effect in the next internal and official builds.

You can either remove these styles or modify the selectors, so that they only influence elements that need them (if such exist).

The "correct" values (with regard to the Scheduler) are:

1. table margins - zero (this is the default value)
2. table header cells font size - unmodified / inherited

Please make the necessary changes, according to your specific scenarios.

My personal recommendation is to be careful with "precompiled" stylesheets such as Site.css from the default Visual Studio MVC project template. For production applications one should only use CSS rules that serve a specific purpose for the given application.

Regards,
Dimo
Telerik

[Erik]

I found my issue, and it was not css.
After looking between my working "test" project, and the project we are trying to integrate the Scheduler into, I have found that JQuery 1.8.3 was the cause to my issues.

My test project referenced ver. 1.8.2, and was solid, but the project I was trying to integrate, about every other refresh the content of the scheduler and the headers/ Time axis were getting smashed/ ordered incorrectly.

Hope it helps.