Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issues with automatic scrolling to top when blazor.bootstrap.css is used #785

Open
RoHa1000 opened this issue Jul 2, 2024 · 0 comments
Open

Comments

@RoHa1000
Copy link

RoHa1000 commented Jul 2, 2024

Describe the bug
Blazor automatic scrolling to top on navigation does not work. JavaScript functions to scroll to top does not work. Happens when blazor.bootstrap.css is included. 100% reproducable. No errors in browser console or Visual Studio.

To Reproduce
Create a new project
Blazor WebAssembly Standalone App
Framework = .NET 8.0

Replace the content in Counter.razor with:

@page "/counter"
@page "/counter/{MyParam}"
<hi>Scroll bug example</hi>
<div style="color:green;height:1200px;width:100%"></div>
<a href="/counter/A">Select A</a>
<br />
<a href="/counter/B">Select B</a>
@code {
	[Parameter]
	public string MyParam { get; set; } = null!;
}

Run the application
Go to counter page
Scroll down
Click on "Selact A"
The address is changed and the page scrolls to the top
Scroll to bottom
Open developer tools in the console and go to the console
Type "document.documentElement.scrollTop = 0"
The page scrolls to the top
Scroll to bottom
Type "window.scrollTo(0, 0)"
The page scrolls to the top
Close the application

Install NuGet Blazor.Bootstrap according to the instructions at https://docs.blazorbootstrap.com/getting-started/blazor-webassembly-net-8
I am using stable version 2.2.0, also tested with 3.0.0-preview.2

Run the application
Repeat the actions in the browser
Note that it never scrolls to top
Close the application

In index.html, remove the link to "_content/Blazor.Bootstrap/blazor.bootstrap.css"

Run the application
Repeat the actions in the browser
Scrolling works again

Expected behavior
Scrolling should not be affected by using blazor.bootstrap.css.

Screenshots

Versions (please complete the following information):

  • .NET 8
  • BlazorBootstrap 2.2.0 and 3.0.0-preview.2
  • Blazor WebAssembly

Sample code

GitHub repo

Desktop (please complete the following information):

  • OS: Windows 11
  • Browser: Edge and Chrome

Smartphone (please complete the following information):

Additional context

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant