Scheduler hours not aligning with Intervals

[Eddie Thornton]

Hello,

I'm experiencing some slightly strange behaviour from the Blazor Scheduler component.  The Intervals/Timeslots are not aligning properly with the Hours on the left in Week View:

I get something similar when using Day View as well:

Is there any way of forcing these to align?  I'd be grateful for any ideas.

The code used to create the Scheduler screenshots above is taken from the Getting Started page, it's basically just the grid and an empty class, nothing fancy.  I'll paste it below but I don't think that's the cause.  

The issue only happens when I add the code into one of our companies Razor pages.  I think something in there is causing the alignment issue to happen but I'm not sure what it is, or even how to identify it.

This is the only issue I'm having with the control, I'm really impressed with it, I just need it to align these Hours and Intervals/Timeslots up.

All Syncfusion Blazor controls in our project, including the Scheduler, are version 27.1.53.

Cheers,

Eddie

-----------------------------------------------

@page "/EddieBasic"

<h3>EddieBasic</h3>

<SfSchedule TValue=AppointmentData>

    <ScheduleViews>

        <ScheduleView Option="View.Day"></ScheduleView>

        <ScheduleView Option="View.Week"></ScheduleView>

        <ScheduleView Option="View.WorkWeek"></ScheduleView>

        <ScheduleView Option="View.Month"></ScheduleView>

        <ScheduleView Option="View.Agenda"></ScheduleView>

    </ScheduleViews>

</SfSchedule>

@code {

    public class AppointmentData

    {

        public int Id { get; set; }

        public string Subject { get; set; }

        public string Location { get; set; }

        public DateTime StartTime { get; set; }

        public DateTime EndTime { get; set; }

        public string Description { get; set; }

        public bool IsAllDay { get; set; }

        public string RecurrenceRule { get; set; }

        public string RecurrenceException { get; set; }

        public Nullable<int> RecurrenceID { get; set; }

    }

}

[Swathi Ravi]

Hi Eddie Thornton,

Thank you for contacting us and for your kind words about our controls. We’re glad to hear that you’re impressed with the Scheduler component.

We understand the issue you’re facing with the alignment of hours and timeslots in the Week and Day views of the Blazor Scheduler when integrated into your Razor page. Based on your description and the provided screenshots, this behavior might be caused by CSS or layout conflicts within your application’s environment.

To assist you further, we have created a sample using the same code you’ve shared, but we were unable to replicate the misalignment issue on our end. For your reference, we have attached the working sample and image.

Based on the image you provided, it seems a unwanted borders are applied to the scheduler table, that might be causing the issue.

Please run the attached sample in your environment to see if the issue persists. If the problem only occurs within your specific Razor page, it may help to:

1. Inspect the page’s CSS or layout styles to identify any conflicts with the Scheduler.
2. Ensure that the Scheduler's styles has not overrides with the other styles.

If the issue continues, we kindly request you to modify the sample provided, so we can investigate further. We’re committed to resolving this issue for you promptly.

Looking forward to your response.

Regards,

Swathi

Attachment: BlazorScheduler_9c90083c.zip