missing close icon

[Walter Martin]

I'm using blazor server and this sample from your documentation

Blazor Toast Template Example - Syncfusion Demos

In my project I need to add the following CSS

    <link rel='nofollow' href="https://cdn.boldreports.com/2.4.20/content/bold.widgets.core.compatibility.min.css" rel="stylesheet" />

    <link rel='nofollow' href="https://cdn.boldreports.com/2.4.20/content/material/bold.theme.compatibility.min.css" rel="stylesheet" />

but adding these, the close icon in the Toast is not showed when you click on "mail remainder" button

how can I solve the problem ?

[Revanth Krishnan]

Hi Walter, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “In the toast template sample, the close icon is missing  when you click on "mail remainder" button on using the following CSS 

• <link rel='nofollow' rel='nofollow' href="https://cdn.boldreports.com/2.4.20/content/bold.widgets.core.compatibility.min.css" rel="stylesheet" />
• <link rel='nofollow' rel='nofollow' href="https://cdn.boldreports.com/2.4.20/content/material/bold.theme.compatibility.min.css" rel="stylesheet" />”

 

We have tried to reproduce the issue by making the toast template sample and using the above mentioned CSS CDN links in the sample. But we couldn’t reproduce the issue from our end. 

 

We suspect that the issue may have occurred because the `ShowCloseButton` property is not configured in your application. We have prepared a sample for your reference, 

 

Code Snippet: 

 

private async Task MailBtnclick() 

    { 

        string template = "<div id='toastEmail_template'><div class='e-toast-template'><div class='e-toast-message'><div class='e-toast-title'>" + this.ToastData[ToastFlag].from + "</div><div class='e-toast-content'>" + this.ToastData[ToastFlag].subject + "</div></div></div></div>"; 

        await this.MailToastObj.Show(new ToastModel { Content = template, ShowCloseButton = true, Timeout=50000,  ExtendedTimeout=50000 }); 

        ToastFlag++; 

        if (ToastFlag == ToastData.Count) 

        { 

            ToastFlag = 0; 

        } 

    } 

 

Sample: https://www.syncfusion.com/downloads/support/forum/162579/ze/Toast_Template-1933445478 

 

If the issue still occurs, please share us with the following details, 

• Code snippet of the toast rendered and toast shown.
• Code snippet of the CSS CDN links used.
• If possible please share us with the issue reproducible sample or please modify the shared sample with issue reproducing steps.

 

The above details will be helpful for us to validate and reproduce the issue and assist you at the earliest. 

 

Regards, 

Revanth 

[Walter Martin]

Thanks for your support

I forgot to write you the complete list of css files necessary for my application so after a deep investigation I realized that the problem was on a css statement inside my <link rel="stylesheet" rel='nofollow' href="css/site.css" />

Deleting my bad statement every thing is working fine

Thanks

[Revanth Krishnan]

Hi Walter, 

 

Thanks for the update. 

 

We are glad that the reported issue has been resolved. Please let us if you need further assistance. 

 

Regards, 

Revanth