Horizontal scrollbar on all pages since last update

Radzen Studio Blazor Server
1

Hi,

since your last update where you made changes to the themes, I now have a horizontal (unnecessary) scrollbar on all pages of my Radzen application.

It checked the styles and

.rz-layout .rz-body {
grid-area: rz-body;
overflow: auto;
}

"overflow:auto" creates this effect. If I remove that style, the scrollbar is gone but also vertical scrolling (in case the page is longer than the screen) is not working them. The horizontal scrollar that appears is actually not needed since it scrolls only one pixel and from what I can see in the page, there is no (visible) overflow.

I assume that the tweaked styles for the updated layouts have caused this effect. Can you reproduce this iussue? In my main layout, I have remove the bar at the bottom of the screen.

Thanks for looking into this!

Best regards,

Joe
2

This CSS rule has existed for a long time so I don't think the last update caused the issue. Unfortunately we can't reproduce it locally just by removing the footer of the layout.

A quick fix should be to add this to the styles.css file.

.rz-layout .rz-body {
   overflow-x: hidden;
}

Still we would like to find what is causing the issue - can you send your application to info@radzen.com? We can try reproducing the problem just with the meta directory of your app.

3

By the way have you changed the default font-size in your application via custom CSS?

4

Yes, I did change the font and the font size via "Customize Theme":

Size: 14px
Family: 'Segoe UI','Source Sans Pro', sans-serif

I will try to narrow this down with a new project and let you know once I found to cause. Your workaround works so far in this setup. Thanks a lot!

5

What theme are you using?

6

Nevermind - managed to reproduce it. It is font-size: 14px that causes the scroll and we will investigate how to address that.

7

We released Radzen 2.80.3 which should solve this issue (as well as a few others). IDon't forget to upgrade your custom theme by going to the app settings and clicking the save button.

1 Like