Hi Team, I tried to customize the scrollbar in radzen grid,but it is not impacting the UI. Can someone help me here. I used this class rz-default-scrollbars. I want the scrollbar, border-radius to be 5px
Hi @Anjali_Menon,
If you are using *-base.css theme, the following style should do the trick:
:root {
--rz-scrollbar-border-radius: 16px;
}
Depending on the theme you might have to increase or decrease the value get to the 5px look.
The .rz-default-scrollbars class is used in non -base themes to reset the scrollbars to browser defaults.
Hi @yordanov , yes im using base.css theme.
Also as per your suggestion I added the above line in the css
:root {
--rz-scrollbar-border-radius: 16px;
},
still i do not see the change in the Ui
Hey did u find the working solution?
Hi @alex4444,
The scrollbars with *-base.css theme are styled only when the component is placed inside a RadzenLayout (a container with .rz-layout css class).
We managed to reproduce the issue with scrollbars not being styled in RadzenDropDown. It happens because the dropdown's popup is not rendered inside a RadzenLayout container. Perhaps this is the issue @Anjali_Menon also observed not placing the RadzenDataGrid inside RadzenLayout.
Since the .rz-layout container adds additional layout sizing and positioning styles that you might not need, we are considering the introduction of an optional .rz-scrollbars css class in base themes that will allow you to style all scrollbars by adding it to the <body> of you app. The class will be available with the next Radzen.Blazor version.
Alternatively you can use a non-base theme e.g. default.css, but chances are it will also override other styles in you app such as font-size, line-height etc.