I'm using Radzen components for Blazor but it has a negative affect of styling the scrollbar. I don't want that and everything I am trying in CSS is failing to clear the ::-webkit-scrollbar-* settings. I don't want the default that is coming from default.css coming from the Radzen component.
We will introduce a new CSS class that when applied to the body will prevent scrollbar styling.
<body class="rz-default-scrollbars">
I will post here when Radzen.Blazor has been updated.
For an immediate workaround you would need to use a local copy of the theme CSS file instead of the embedded one and delete all ::--webkit-scrollbar stuff.
1 Like
@timheuer the current version of Radzen.Blazor should contain the aforementioned CSS class. Add it to your <body> element to prevent the scrollbar styling.
1 Like
Hey, I’ve got Radzen.Blazor Components v6.6.4 and i can’t update right now, i believe, this version is much newer than 2020… And yet, there is no mentioned class in inspected default-base.css. I looked into Radzen sources in Github and yes it’s there in:
But in my css, the scrollbar styling is always set…
The class is now called rz-default-scrollbars. Also if you use the -base CSS files e.g. material-base.css instead of material.css you would not get scrollbar styling at all. They exist mostly for backwards compatibility.
UPDATE: I stand corrected - those statements are no longer true check @yordanov 's reply below.
I’m using:
<HeadContent>
<RadzenTheme Theme="@appState.Theme" Wcag="@appState.WCAG" />
</HeadContent>
where:
Theme = default
WCAG = true
and i’m getting in head lement in generated HTML:
<link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css?v=6.6.4.0">
And there is no class rz-default-scrollbars in there...
Yes, with no way of removing them other than:
.rz-layout::-webkit-scrollbar,
.rz-layout ::-webkit-scrollbar,
.rz-scrollbars::-webkit-scrollbar,
.rz-scrollbars ::-webkit-scrollbar {
all: unset !important;
}
.rz-layout::-webkit-scrollbar-thumb,
.rz-layout ::-webkit-scrollbar-thumb,
.rz-scrollbars::-webkit-scrollbar-thumb,
.rz-scrollbars ::-webkit-scrollbar-thumb {
all: unset !important;
}
.rz-layout::-webkit-scrollbar-corner,
.rz-layout ::-webkit-scrollbar-corner,
.rz-scrollbars::-webkit-scrollbar-corner,
.rz-scrollbars ::-webkit-scrollbar-corner {
all: unset !important;
}
but that just renders them invisible...
I may be asking wrong question actually, I'm using <RadzenTable> in overflow container and i'm getting this scrollbars:
which is fine on desktop, but on mobile browsers, they are rendered over the text on the right in the last column. So basically i'm wondering what to do about that...
Hi @ns6000,
Is <RadzenLayout> present? If you’re not using <RadzenLayout> and the <body> element doesn’t have class="rz-scrollbars", the scrollbars shouldn’t be styled.
Yes I am as my top element in <AuthorizeView>
We will update *-base.css themes to include the .rz-default-scrollbars class. If updating to the newer version isn’t an option, your only practical workaround is to remove the <RadzenLayout>.
That's unfortuantelly not an option, that indeed resets the scrollbars but it kinda fucks up everything else 
Thanks anyway 
There is one additional workaround - to build a custom theme from source.
- Clone the radzen-blazor github repository
- Checkout the tag that corresponds to the version that you use.
- Open _scrollbar.scss and delete everything.
- Build Radzen.Blazor.csproj - the theme CSS files should be in the wwwroot subdirectory.
- Copy the desired theme CSS file to your own app's wwwroot folder and include it via
<link />. Remove RadzenTheme.