Unable to put line breaks in my SfToast content

[Michael LeClair]

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!

[Mallesh Ravi Chandran]

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

[Michael LeClair]

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!

[Mallesh Ravi Chandran]

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 

[Michael LeClair]

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

[Priyanka Karthikeyan]

Hi Michael,

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

Regards,

Priyanka K