Isolated Css

[Mike Chafin]

When I try isolated Css with the Toast control, it does not work. I would like for isolated CSS to work.

Version: 20.4.0.48

I've attached my test page and the razor.css files

Attachment: Toast_cf0063b0.zip

[Vinitha Jeyakumar]

Hi Mike,

We want to let you know that we need to set Target to the Toast control to use the isolated CSS styles, since the Toast will be rendered in the body element when we didn't add any Target property, and then use the ::deep selector as like provided in the below code snippet. we have also prepared a sample for your reference.

Code snippet:

ToastFeatures.razor

<div id='toast_target'></div>

    <SfToast ID="toast_default" @ref="ToastObj" Timeout="0" Title="File Downloading" Content="@ToastContent"

             ShowCloseButton="true" Target="#toast_target">

    </SfToast>    

        <div id="toastBtnDefault" style="margin: auto; text-align: center">

            <SfButton @onclick="@ShowToast"> Show Toast </SfButton>

  </div>

ToastFeatures.razor.css

 ::deep .e-toast-container .e-toast .e-toast-message .e-toast-title {

            color: deepskyblue;

            font-size: 18px;

            font-weight: bold;

            text-align: center;

        }

Regards,

Vinitha

Attachment: ToastServer_326490ed.zip

[Mike Chafin]

That worked great. Thanks.

[Vinitha Jeyakumar]

Hi Mike,

We are glad to assist you.

Regards,

Vinitha