Scrollbars outside .rz-layout missing styles

[GodzSky]

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!

[yordanov]

Hi @GodzSky,

@GodzSky

scrollbars outside RadzenLayout (.rz-layout) are missing styles.

That's on purpose as we try to make the components as unobtrusive as possible.

@GodzSky

if u set class="rz-scrollbars" to the body the styles is correct

Indeed, this is what you should do. Will add this explanation to the demos.

The behaviour in Standard Dark theme looks like a bug, will fix it, thanks!

[Alex_Ti]

@yordanov

The behaviour in Standard Dark theme looks like a bug, will fix it, thanks!

Hello)

if this problem is fixed for now?

have same problem

In dialogs, srollbar doent change to dark theme in my app, unfortunately

[yordanov]

Hi @Alex_Ti,

In the latest version <body class="rz-scrollbars"> adds Radzen's styles to the scrollbars and <body class="rz-default-scrollbars"> removes the styles and displays the native scrollbar. Works with all themes in the demos.

[Alex_Ti]

Perfect!

for now scrolls have same theme like an app)))