Scheduler timeline day cell width change after window resize

[Jens Hal]

Hello

I am testing some stuff using the room scheduler demo as a base.
https://blazor.syncfusion.com/demos/scheduler/room-scheduler?theme=fluent

I am trying to change the cell size. But it is either not working or I am getting strange behavior.

If I try to use the css from the documentation on scheduler. It does not change anything at all.

https://blazor.syncfusion.com/documentation/scheduler/cell-customization

    .schedule-cell-dimension.e-schedule .e-timeline-view .e-date-header-wrap table col,
    .schedule-cell-dimension.e-schedule .e-timeline-view .e-content-wrap table col {
        width: 200px;
    }

If i use this css It does change the size of the cells. Just not in an expected way.

.e-schedule .e-timeline-view .e-date-header-wrap table col,
.e-schedule .e-timeline-view .e-content-wrap table col{
width: 20px;
}

 

It does change the size but not to 20px in this case it is 28px. If I set it to 50px It does set the cell size to 50px. So I think okay there is a minimum size somewhere?

But then if I resize the window, it redraws the scheduler and now the cells are 20px. If I change views, it goes back to 28px, until I resize the window again.

Attachment: example_c6249ae6.zip

[Ruksar Moosa Sait]

Hi Jens,

We have prepared a sample to check the reported issue at our end. But, we are unable to reproduce the problem on our end and it works as expected. On your shared code snippet you have overridden the default Schedule styles twice to set the width for the cells and we have commented out one of them and used only one alone as highlighted in the below code snippet. Kindly try the attached sample and let us know if you need any assistance.

.e-schedule .e-timeline-view .e-date-header-wrap table col,

.e-schedule .e-timeline-view .e-content-wrap table col {

        width: 20px !important;

    }

Output:

Regards,

Ruksar Moosa Sait

Attachment: BlazorRoomScheduler_56b7dbcb.zip

[Jens Hal]

Yes, the fact that it was overridden twice is a copy and paste error. But that is not the cause of the problem. And removing it does not fix it.

The problem occurs when the changing views, i.e., from day to week view. And the width of the cells is made larger to fit the screen. Then when you change back to week view the new cell width is in some way calculated based on the large width and not the width specified in the css. The correct width is used when redrawing the scheduler because the window size is change.

Adding !Important to the width does seem to fix this. But I still believe it uses the wrong width value when changing views.

I replicated the problem using your supplied example by removing !Important from width.

[Ruksar Moosa Sait]

Hi Jens,

We have checked on your query and let you know that when the cells are rendered, we have set the inline styles at our source end. Hence it is necessary to set !importnant at the sample end to overwrite the inline styles. Kindly let us know if you need further assistance.

Regards,

Ruksar Moosa Sait