Blazored/Toast

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

slamarreacosta opened this issue · 1 comments

slamarreacosta commented

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?):

  • Blazor Server

Additional context
Add any other context about the problem here.

SuperPigBlog commented

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!