This is a migrated thread and some comments may be shown as answers.

When Modal Window is Shown background scrolling can still happen

2 Answers 1601 Views
Window
This is a migrated thread and some comments may be shown as answers.
Mr Chas
Top achievements
Rank 1
Mr Chas asked on 10 Aug 2020, 11:53 AM
When a modal window is shown the browser can still scroll in the background. See https://www.telerik.com/forums/how-to-globally-disabled-scrolling-when-a-modal-is-open for something similar that was happening in the kendo components. Any guidance on a fix for the blazor component?

2 Answers, 1 is accepted

Sort by
-2
Marin Bratanov
Telerik team
answered on 10 Aug 2020, 12:12 PM

Hello,

The <body> is not available to Blazor to modify, the entire blazor app is in the <app> element inside it. So, such disabling of the scrollbar would have to happen with JS, like in the Stocks sample app we have (click the profile at the top right). Also, to modify the <body> in a Blazor way, it would have to be fully within our components, which it cannot be.

Another thing to consider is that the element that actually scrolls can vary greatly with different layouts - it could be the <body>, it could be <app>, or it could be some element specific to the particular application layout and structure (which can even change from one page to the next). Thus, the Window cannot know which element to touch in order to disable its scrollbar. This is the major reason why our oldest modal popup, the RadWindow for ASP.NET WebForms does not disable scrollbars automatically either.

So, the solution is to remove the scrollbar with your own code when and as desired, here's an example of that app:

  • when the window is shown, remove the scrollbar by setting the DOM element overflow property (line link and js function)
  • when it is closed, restore the scrollbar in the same fashion (line link)


 

Regards,
Marin Bratanov
Progress Telerik

0
Mr Chas
Top achievements
Rank 1
answered on 10 Aug 2020, 12:50 PM
Thank you!
Tags
Window
Asked by
Mr Chas
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Mr Chas
Top achievements
Rank 1
Share this question
or