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.
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.
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:
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.
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
And here is with the scrollbar hidden. See how the red borders are misaligned:
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 */
}