Hello i saw that scrollbars outside RadzenLayout (.rz-layout) are missing styles.
Dialogs are always outside .rz-layout.
I also noticed if u set class="rz-scrollbars" to the body the styles is correct (like in the demo).
To reproduce in demo:
- Navigate to the dialog page Blazor Dialog Component | Free UI Components by Radzen
- Remove class rz-scrollbars from the body tag.
- Open the first dialog: u will see that scrollbar is missing some style
Should be (before removing rz-scrollbars):
This happen with all themes except "Standard Dark" as u can see:
In the "Standard Dark" css :
body:not(.rz-default-scrollbars)::-webkit-scrollbar,
body:not(.rz-default-scrollbars) ::-webkit-scrollbar {
background-color: var(--rz-scrollbar-background-color);
width: var(--rz-scrollbar-size);
height: var(--rz-scrollbar-size);
}
body:not(.rz-default-scrollbars)::-webkit-scrollbar-thumb,
body:not(.rz-default-scrollbars) ::-webkit-scrollbar-thumb {
background: var(--rz-scrollbar-color);
border: 4px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
border-radius: var(--rz-scrollbar-border-radius);
min-width: var(--rz-scrollbar-size);
min-height: var(--rz-scrollbar-size);
}
body:not(.rz-default-scrollbars)::-webkit-scrollbar-corner,
body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner {
background-color: var(--rz-scrollbar-background-color);
}
.rz-layout::-webkit-scrollbar,
.rz-layout ::-webkit-scrollbar,
.rz-scrollbars::-webkit-scrollbar,
.rz-scrollbars ::-webkit-scrollbar {
background-color: var(--rz-scrollbar-background-color);
width: var(--rz-scrollbar-size);
height: var(--rz-scrollbar-size);
}
.rz-layout::-webkit-scrollbar-thumb,
.rz-layout ::-webkit-scrollbar-thumb,
.rz-scrollbars::-webkit-scrollbar-thumb,
.rz-scrollbars ::-webkit-scrollbar-thumb {
background: var(--rz-scrollbar-color);
border: 4px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
border-radius: var(--rz-scrollbar-border-radius);
min-width: var(--rz-scrollbar-size);
min-height: var(--rz-scrollbar-size);
}
.rz-layout::-webkit-scrollbar-corner,
.rz-layout ::-webkit-scrollbar-corner,
.rz-scrollbars::-webkit-scrollbar-corner,
.rz-scrollbars ::-webkit-scrollbar-corner {
background-color: var(--rz-scrollbar-background-color);
}
In the other css :
.rz-layout::-webkit-scrollbar,
.rz-layout ::-webkit-scrollbar,
.rz-scrollbars::-webkit-scrollbar,
.rz-scrollbars ::-webkit-scrollbar {
background-color: var(--rz-scrollbar-background-color);
width: var(--rz-scrollbar-size);
height: var(--rz-scrollbar-size);
}
.rz-layout::-webkit-scrollbar-thumb,
.rz-layout ::-webkit-scrollbar-thumb,
.rz-scrollbars::-webkit-scrollbar-thumb,
.rz-scrollbars ::-webkit-scrollbar-thumb {
background: var(--rz-scrollbar-color);
border: 4px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
border-radius: var(--rz-scrollbar-border-radius);
min-width: var(--rz-scrollbar-size);
min-height: var(--rz-scrollbar-size);
}
.rz-layout::-webkit-scrollbar-corner,
.rz-layout ::-webkit-scrollbar-corner,
.rz-scrollbars::-webkit-scrollbar-corner,
.rz-scrollbars ::-webkit-scrollbar-corner {
background-color
As u can see the css selector "body:not(.rz-default-scrollbars)" is missing.
Since i didnt find any documentation about adding the "rz-scrollbars" class to the body i think its a bug.
@yordanov I hope i made myself understandable.
Thanks!