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

Unable to put line breaks in my SfToast content

Hello,

I'm trying to display line breaks in my SfToast control to make it multi-line.  Based on what I saw in other similar threads I've tried adding "<p> some text </p> <br> <p> some other text </p>" (as an example) and it doesn't work.  Text is displayed as 1 line.  I'm using "Syncfusion.Blazor.Notifications V20.4.051" at the moment.  Thanks in advance!


5 Replies

MR Mallesh Ravi Chandran Syncfusion Team April 24, 2023 04:16 PM UTC

Hi Michael,

Greetings from Syncfusion support.

You can include <br> tag into SfToast content using the Content property to include line breaks in SfToast content. Please check the code snippet and sample for your reference.

    <SfToast ID="toast_default" @ref="ToastObj" Title="Toast Header" Content="@ToastContent" > 

    </SfToast> 

     

@code { 

    SfToast ToastObj; 

    private string ToastPosition = "Right"; 

    private string ToastContent = "<p>Your date of birth is in the future</p> <br> <p>Please enter a valid date of birth</p>"; 

    } 


If you are still facing the issue, we request that you provide additional details about the issue and issue a reproducible sample (or modify the shared sample as per your scenario). This will help us validate the issue further and provide you with a better solution.


Regards,

Mallesh 


Attachment: ToastLineBreak(S)_75a050b0.zip


ML Michael LeClair April 24, 2023 05:18 PM UTC

Hello and thank you for your response.  I have tried hardcoding it before similar to what you've done and it doesn't work.  I redid it with the same value that you used as an example.  Here is the code:

<SfToast @ref="Toast" Timeout=0 ShowCloseButton="true" NewestOnTop="true" >

    <ToastTemplates>

        <Title>

            @Options.Title

        </Title>

        <Content>

            @ToastContent

        </Content>

    </ToastTemplates>

    <ToastPosition X="Right"></ToastPosition>

    <ToastButtons>

        <ToastButton Content="@vt["Hide"]" OnClick="@HideToast"></ToastButton>

        <ToastButton Content="@vt["Clear"]" OnClick="@EmtpyToast"></ToastButton>

    </ToastButtons>

</SfToast>


@code{


    SfToast? Toast;


    public bool IsToastVisible { get; set; } = false;


    private ToastOption Options = new ToastOption();

    private string ToastContent = "<p>Your date of birth is in the future</p> <br> <p>Please enter a valid date of birth</p>";


And here is what is displayed in the Toast:



Not sure what is missing.


Thanks again!



MR Mallesh Ravi Chandran Syncfusion Team April 25, 2023 04:57 PM UTC

Hi Michael,


We would like to inform you that the SfToast control supports multiple-line content. To use MarkupString, you can set the raw HTML content as a string to any parameter and then cast it to a MarkupString object. This should enable you to display line breaks and make the content multi-line. We have also shared the sample and code snippet for your reference.


<SfToast @ref="@ToastObj">

    <ToastTemplates>

        <Template>

        <Content>

               @((MarkupString)ToastContent)

        </Content>

        </Template>

    </ToastTemplates>

</SfToast>


Attachment: ToastTemplate_24d5d4a3.zip


Regards,
Mallesh 





ML Michael LeClair April 26, 2023 10:54 AM UTC

That works!!! Thank you so much.  Casting it as a Markup string is what was needed.  I didn't see this in the older posts.


Thanks again for your help with this.


Mike



PK Priyanka Karthikeyan Syncfusion Team May 1, 2023 06:21 AM UTC

Hi Michael,

Thanks for your update. Please get back to us if you need further assistance on this.

Regards,

Priyanka K



Loader.
Live Chat Icon For mobile
Up arrow icon