1. Home
  2. Forum
  3. Blazor
  4. Toast Notification overlaps on the page due to new instance sets the position at top.

Toast Notification overlaps on the page due to new instance sets the position at top.

I have a page(parent Component) and that has multiple sections (child components). 
When each section loads it triggers the toast message. In my case, all the sections loads simultaneously, and that causes notification to overlap with one another. 
For code, I just copied the example given in the Syncfusion document, only difference is the multiple sections. Root cause is, It creates new instance on each section of the page which resets the position to top for all the section,

Is there a way I can handle this effectively?


5 Replies
UD UdhayaKumar Duraisamy Syncfusion Team January 24, 2025 05:20 AM UTC

Based on the details you provided, we created a sample using the Toast component to dynamically update its content, header, and CssClass upon a button click. We also attempted to replicate the reported scenario where multiple Toasts overlap when triggered simultaneously. However, in our testing, the Toast notifications did not overlap. For your reference, we’ve shared the sample and a video illustration below:




To handle scenarios where multiple Toast messages are displayed simultaneously, we recommend initializing the Toast component as a service in Blazor. Using the Toast service ensures that multiple instances are not created, and the same instance can be reused throughout the application. This approach effectively prevents overlapping notifications. You can refer to the following Knowledge Base (KB) article for detailed guidance on implementing the Toast service:


If the suggested solution does not meet your requirements, we request additional details to provide a more tailored resolution. Kindly share: 
  • Please share a runnable sample that demonstrates the issue you are experiencing. You may also modify the above shared sample to reflect your specific scenario. This will help us understand how you are integrating and handling the component in your project.
  • Issue replication steps.
  • A video illustration of the issue.

These details will help us understand how the Toast component is integrated and managed in your project.

BR Balasubramanian Rajan January 24, 2025 07:58 AM UTC

This works because its same Instance of Toast Object, and its in single component, 
My problem is specific to multiple Toast object Initializes, 


Eg :

<ParentComponent1> 

     <child1> </child2>

     <child2> </child2>
</ParentComponent1> 


Child1.razor

<div>
    <SfToast @ref="ToastObj" Title="@ToastTitle" Content="@ToastContent" CssClass="@ToastCssClass">
        <ToastPosition X="Right" Y="Top"></ToastPosition>
    </SfToast>
</div>
<div class="col-lg-12 col-sm-12 col-md-12 center">
    <div style="margin: auto; text-align: center">
        <SfButton @onclick="@ShowToast"> Show Toast </SfButton>
    </div>
</div>

Child2.razor

<div>
    <SfToast @ref="ToastObj" Title="@ToastTitle" Content="@ToastContent" CssClass="@ToastCssClass">
        <ToastPosition X="Right" Y="Top"></ToastPosition>
    </SfToast>
</div>
<div class="col-lg-12 col-sm-12 col-md-12 center">
    <div style="margin: auto; text-align: center">
        <SfButton @onclick="@ShowToast"> Show Toast </SfButton>
    </div>
</div>


Please re-read this line, 

I have a page(parent Component) and that has multiple sections (child components). 
When each section loads it triggers the toast message. In my case, all the sections loads simultaneously, and that causes notification to overlap with one another. 






YS Yohapuja Selvakumaran Syncfusion Team February 3, 2025 01:43 PM UTC

Hi Balasubramanian,

Thank you for getting back to us. We appreciate your patience and the details you’ve shared.

We have carefully reviewed the reported behavior and would like to clarify that the toast notifications are designed to display sequentially rather than overlapping. Based on the provided code snippet, we have created a sample for your reference. Kindly check it out and let us know if you need any further adjustments or clarifications.





Regards,

Yohapuja S


Attachment: toast_child_parent_b5a6209f.zip

BR Balasubramanian Rajan February 3, 2025 03:18 PM UTC

Hi, 


I tried the sample program which you shared. Let me explain how it works, 

on clicking of first button for 1st time, the 1st notification pops up. 
on clicking of 2nd button for 1st time, the 2nd notification overlap the 1st pop up. 
on clicking of 2nd button for 2nd time, the 3rd notification appears at the bottom. 

I suggest you to have different content for button1's toast and button2's toast. 


YS Yohapuja Selvakumaran Syncfusion Team February 12, 2025 01:27 PM UTC

Hi Balasubramanian Rajan

We apologize for the delay and appreciate your patience.

We have carefully reviewed the reported issue, and we would like to suggest a solution to differentiate the two toast notifications. You can achieve this by setting different positions for each child toast. This ensures that both toasts appear distinctly without overlapping.

For your reference, we have prepared a sample demonstrating this approach:

Child1.razor

   
 <SfToast @ref="ToastObj" Title="@ToastTitle" Content="@ToastContent" CssClass="@ToastCssClass">
        <ToastPosition X="Right" Y="Top"></ToastPosition>
    </SfToast>

Child2.razor 


    <SfToast @ref="ToastObj" Title="@ToastTitle" Content="@ToastContent" CssClass="@ToastCssClass">
        <ToastPosition X="Left" Y="Top"></ToastPosition>
    </SfToast>

By assigning different positions, you can ensure that both toast notifications are clearly distinguishable.

Please give this a try and let us know if you need further assistance.


Regards,

Yohapuja S


Attachment: Toast_childe_parent_2c931f0.zip

Loader.
Up arrow icon