Scrollbar in scheduler header in firefox

Radzen.Blazor Components
1

hi,
we use the radzen scheduler. Usually we develop in Edge. When we tested in firefox we recognized: The header has always a scrollbar on the right side of the header in the day and week view. The month view looks fine.

grafik

The css of the rz-view-header class sets the overflow-y to scroll. if i override it with hidden, it is fine. Is there a better solution?

It also happens in the examples. Tested with Firefox 115.14.0esr (64-Bit) on diffrent systems and resolutions, Radzen 4.31.7 and 5.1.7.

2

Hi @DevDaniel,

Could you please inspect the page and see where the overflow-y: scroll style comes from. I couldn't find one associated to rz-view-header in the demos:

The screenshot is from Firefox 115.15.0esr on macOS:

image
image1920×556 107 KB

3

On the examples I found the Code below in material3-base.css.

In my local project they are also in _content/Radzen.Blazor/css/standard-base.css. Tested with v4.31.7 and v5.1.7. In your github Repo I found for the day-view this and the week-view this.

.rz-week-view .rz-view-header {
    overflow-y: scroll;
    scrollbar-width: auto
}

I don't know why the content of the header is bigger in my firefox then chromium based browsers. My simple hack wold be to override it with !important but it isn't nice.

4

Thanks for clarifying, @DevDaniel.

Yes, we've added the scroll for day and week views in order to make sure the header cells align properly to the content ones in all browsers and systems. That means setting the overflow to hidden will shift the cells to the right.

Here is how it looks with overflow-y: scroll

image
image3176×472 37.6 KB

And here is with the scrollbar hidden. See how the red borders are misaligned:

image
image3172×450 37.6 KB

You can set transparent colors in order to hide the scrollbar:

.rz-view-header {
    scrollbar-color: transparent transparent;
}

.rz-week-view .rz-view-header,
.rz-day-view .rz-view-header,
.rz-view-content {
    scrollbar-width: thin; /* this should remove the scrollbar arrows */
}
5

Hi,

we use RadzenScheduler with RadzenDayView StartTime=@TimeSpan.FromHours(0), but I would like to set focus to 8:00 is it possible?
Probably property for doing this stuff doesn't exist, but is it possible to do it via javascript?

I tried to do it via finding scrollbar element, but I couldn't find it in DOM.

Do you have some tips?
Thanks in advance, Milan