Page would Not Scroll when Deployed to Azure

Radzen.Blazor Components
1

Hi Team,

I have faced a very strange issue that took me a few days to resolve.

I have a .NET 6 Blazor Server app which has multiple RadzenDataGrid components(when you select the row of one grid, another grid appears and so on). The page used to work perfectly fine, I updated my Radzen Nuget package to 4.7.2 and that's when problems started.

The app would run normally on localhost, the page was scrollable normally. Once I would publish the app into an Azure App Service, the page would not show the scroll bar. I could zoom out of page and see that the grids were there, but at standard zoom levels, there was no scroll bar and hence no way to scroll to the bottom of the page.

I tried different browsers on phone and Windows PC and the issue stayed. I deleted all the files for the webapp in Azure, republished and the issue stayed, I tried deleting the entire razor page and created a new one, the issue stayed, I tried adding a custom style to the DIV that would allow auto overflow, the issue stayed, The worst part was in all these cases scroll bar was visible on localhost and absent when deployed. Either on local host or post deployment, there were no errors in the console.

This is where I felt that it was possible that some dependency in Azure App Service does not seem to like Radzen, I downgraded by Radzen Nuget Package to 4.0.0 and VIOLA!!, Scroll bar works everywhere.

This is a very strange issue that kept me puzzled for days. If some of the developers can reproduce the issue and fix it in the next Nuget packages, this could save a ton of effort if someone runs into a similar problem.

Environment Details:
Development done on Visual Studio 2022
.NET 6, Blazor Server App
Azure Web App Service: Windows, Premium Plan, .NET 6, Standard configuration with WebSockets enabled.

Hope this helps someone.

Thanks & Regards,
Nouman

2

Hi @N_Q,

We are not aware of such issue and will need some form of reproduction. Either provide a URL which we can browse or see if you can reproduce it in our online demos: Blazor DataGrid commponent with code-less paging, sorting and filtering of IQueryable data sources

3

I had the same problem after upgrading. A page that I used the Dialog control on randomly started adding the no-scroll class to the body element. I cannot provide a publicly available example though.

4

Same issue here: no-scroll is being automatically added to my body tag.

It always happens in Chrome and Edge, and randomly happens in Firefox.

I've been using 4.23.2.

I just updated to 4.30.2 (latest as of this post), and the problem remains.

My code:
image

What shows in Chrome Developer Tools:
image

This has to be fixed as soon as possible, as it's preventing my users from working in several cases -- anyone have any suggestions?

Edit to add: This occurs on every page in my website -- except one. That page is no different than the ones where it occurs, and there is no special CSS in it. The truly absurd thing is that once I click on that one page where it works, it works everywhere else until I click on a particular page that screws it back up so scroll stops working everywhere again.

Regards,
William

5

I would recommend downgrading and seeing if an older nugget package resolves it, because that's what worked for me.

6

The 'no-scroll' class should be removed when a dialog is closed. Doesn't this happen for you? If yes - how can we reproduce that?