How to disable overflow in Blazor only in certain pages-CodePudding

I am building a Blazor server app starting from the Visual Studio template.

I need to disable overflow scroll bars only for one page. Adding html, body { overflow : hidden; } in the relative Blazor component's css it does not work.

The project has already a site.css, if I add the overflow : hidden; in there it works but, of course, it will disable it for the whole site.

CodePudding user response：

I think you can probably apply it to the Layout. It all depends on whether you're doing anything out of the ordinary in the hosted cshtml page.

Create a copy of the existing Layout and apply the style to the top page element.

Modify the page element in the css file.

.page {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow:hidden;
}

Here's my test page - my new Layout is BaseLayout.razor:

@layout BaseLayout
@page "/"

<div style="width:3000px" >
<h1>Hello</h1>
</div>

@code {
}

CodePudding user response：

You could cascade your Layout and set the class from any descendent. This is a simplified version-- in reality, you'd want to more carefully control how you set the class variable-- but you can get the basic idea. Note that @body isn't the html body, it's the Blazor content.

MainLayout.razor

<div >
    <CascadingValue Value="this">
       @body
    </CascadingValue>
</div>

@code{
    public string LayoutClass = "layout-default";
}

AnyChild.razor

@code{
  [CascadingParameter]
  public MainLayout? Main { get; set; }

  void ChangeRootClass(){
     if (Main is not null) Main.LayoutClass = "AlternatePageClass";
  }
}