search

Blazored / Toast

A JavaScript free toast library for Blazor and Razor Component applications
https://blazored.github.io/Toast/
MIT License
654 stars 90 forks source link

[Bug] Position incorrect when viewing in cell phone mode or narrow window on Blazor Server #231

Open slamarreacosta opened 11 months ago

slamarreacosta commented 11 months ago

Describe the bug Position incorrect when viewing in cell phone mode or narrow window on Blazor Server

I set the Position like this in my MainLayout.razor

image

If I maximize my Chrome window on Windows, then the toast is showing on the bottom right as expected. However, when I resize the window very narrow to emulate a cell phone, the toast is showing on the bottom left side as show below. This behavior is consistent also using Chrome on a device.

To Reproduce Steps to reproduce the behavior:

  1. Set the Position="ToastPosition.BottomRight"
  2. Resize Chrome to a narrow state
  3. Click a button to show the toast
  4. See the toast appearing on the bottom left side.

Expected behavior The Toast should show at the bottom right even if the Chrome window is narrow.

Screenshots image

Hosting Model (is this issue happening with a certain hosting model?):

Additional context Add any other context about the problem here.

SuperPigBlog commented 7 months ago

i got this problem ,when i chang the size of screen up to 575px(or any size less than 576 )；i add some code into xx.razor.css， main ::deep .position-bottomright { bottom: 2rem; right: 2rem; } xx is your container layout , otherwise others Position is the same it work great!