When Modal Window is Shown background scrolling can still happen

3 posts, 0 answers
  1. Mr Chas
    Mr Chas avatar
    3 posts
    Member since:
    Jun 2007

    Posted 10 Aug Link to this post

    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. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5525 posts

    Posted 10 Aug Link to this post

    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

  3. Mr Chas
    Mr Chas avatar
    3 posts
    Member since:
    Jun 2007

    Posted 10 Aug in reply to Marin Bratanov Link to this post

    Thank you!
Back to Top