We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Toast Close Button in Tailwind

When using the Toast in Tailwind theme, the close button is not showing the correct style. I have attached an example to show it and the same issue is prevalent in the Demos too.

Toast_In_Tailwind.png

In the Demos,

Toast_In_Tailwind1.PNG


Attachment: ToastTest_dbbd7a6a.zip

3 Replies 1 reply marked as answer

VY Vinothkumar Yuvaraj Syncfusion Team December 21, 2022 02:03 PM UTC

Hi Nick,


To solve your problem, you can use the following styles. Please see the attached sample for your reference.


<style>

.e-toast .e-toast-close-icon::before{

        content:"\e7e7";

 }

</style>


We will correct our demo sample site and refresh it in any one of our upcoming releases.


Regards,

Vinothkumar



Attachment: ToastTest_6da5b781_12c42393.zip


NI Nick replied to Vinothkumar Yuvaraj December 21, 2022 05:33 PM UTC

Now this removes the Toast close button icon from material, fabric and bootstrap themes and changes the close button icon to a hamburger menu in the bootstrap4 theme.


I tried using .tailwind and .tailwind-dark in front of .e-toast .e-toast-close-icon::before but that does not work either.



VY Vinothkumar Yuvaraj Syncfusion Team December 22, 2022 04:14 PM UTC

Hi Nick,


Please ignore the previously provided sample level solution. We have already fixed and included the fix in Volume 4 release v20.4.0.38, so please upgrade your package version. Please find the demo link below for your reference.


Demo Link : https://blazor.syncfusion.com/demos/toast/template?theme=fluent


Please let us know if you have any concerns.


Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon