Css doesn't apply when remove from css file

[NKOUAMBIA CHIMENE]

Hello Team!

This is my Toast

<SfToast @ref="_toastObj" Height="auto" Width="800px" Content="@_toastContent" TimeOut="0">

    <ToastPosition X="Center" Y="Top"></ToastPosition>

    <ToastEvents OnClick="@ToastClick"></ToastEvents>

</SfToast>

Why when i remove this to my site.css file the style doesn't apply anymore but if i let it on the page it's ok. What have I missing

.e-toast-container .e-toast {

    background-color: red;

}

.e-toast-container .e-toast:hover {  

    background-color: red;  

}

*** How to make sure my toast will be show above my menu?

Thanks,

Chimène 

[Indrajith Srinivasan]

Hi NKOUAMBIA,

Greetings from Syncfusion support,

We have validated your reported query.  

 

Query 1: “Why when i remove this to my site.css file the style doesn't apply anymore but if i let it on the page it's ok“ 

 

The CSS is not applied when setting it from the site.css file, since the source styles for the SfToast are applied first hence the sample level style is not applied. To resolve this, apply styles traversing with the multiple root elements. We have also modified the sample shared.

CSS style

 

 

#DefaultToast.e-toast-container .e-toast {
background-color: red;
} 

#DefaultToast.e-toast-container .e-toast:hover {
background-color: red;
} 

 

Sample: https://www.syncfusion.com/downloads/support/forum/153973/ze/SfToast_Css1417708454 

 

Query 2: “How to make sure my toast will be show above my menu?“ 

 

Set the target of the SfToast as the menu to open the toast above the Menu.

Please let us know if the above solution meets your requirements?

Regards, 

Indrajith