Hi Andrew Fraser,
Based on your issue description, this appears to be a common problem with toast component rendering in Blazor server applications. The issue is likely related to the placement and rendering of the toast component in your MainLayout.razor file.
There are several potential solutions:
Check Z-Index Settings:
When toast isn't visible or appears as a persistent white box, it's often due to z-index issues. Try adding these CSS rules to ensure proper stacking:
.e-toast-container {
z-index: 1000000001 !important;
}
Render Mode Issue:
The behavior might be occurring because the default render mode in Blazor server app is set to ServerPrerendered, which can cause the component to be initialized twice. You can modify your initialization method in the toast component:
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
ToastService.ShowToastTrigger += (ToastOption options) =>
{
InvokeAsync(() =>
{
this.options.title = options.title;
this.options.content = options.content;
this.isToastVisible = true; this.StateHasChanged(); this.toast.ShowAsync();
});
};
}base.OnAfterRender(firstRender);
}
Component Placement:
Make sure your ToastComponent is placed outside of any container that might affect its visibility. In your MainLayout.razor, it should be placed as a direct child of the root element:
@inherits LayoutComponentBase
@using BlazorApp.Components;
<PageTitle>BlazorApp</PageTitle>
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
<main><div class="top-row px-4"><a rel='nofollow' href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
</div>
<article class="content px-4">
@Body
</article>
</main>
</div>
<ToastComponent />
Alternative Implementation:
If the issue persists, try creating a separate component for the toast and reference it in pages where you need it, rather than placing it in MainLayout.
For toast appearing as a persistent white box, ensure you're properly handling the show/hide state in your component and that your CSS isn't interfering with the toast's visibility or styling.
If the issue still persist,
- Provide a minimal reproducible sample with clear steps to reproduce the issue
- Share a video illustration of the problem for our better understanding
Thank you for your patience, understanding, and cooperation. We look forward to assisting you further if needed.
Regards,
Priyanka K
