How can I center the ToastButton on the last line of a toast and change it's color?

[Millard Harris]

Here is the toast I'm using: 

<SfToast @ref="ToastObj" ID="toast_type" Timeout=1000>

            <ToastPosition X="@ToastPosition"></ToastPosition>

                <ToastButtons>

                    <ToastButton Content="Ok" OnClick="@ProcessToast" CssClass="e-toast-button"></ToastButton>

                </ToastButtons>

        </SfToast>

The style is as follows: 

    .e-toast-container .e-toast-button {

        border-radius: 5px;

        background-color: #D1542A;

    }

I just want it to be centered and change its color.  Also, how do I get it to be shown until the button is clicked and not timeout?

Thanks!

[Revanth Krishnan]

Hi Millard, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your queries, 

 

Query 1: “How can I center the Toast Button on the last line of a toast and change its color”? 

 

The color of the toast button can be changes using the `CssClass` property in the `ToastButton` and the button can be centered by overriding the `text-align` CSS style property as `center` in the CSS class `.e-toast-container .e-toast .e-toast-message .e-toast-actions`. 

 

Code Snippet: 

 

<SfToast @ref="ToastObj" ID="toast_type" Title="Toast Title" Timeout=0 ExtendedTimeout="0"> 

    <ToastPosition X="@PositionX" ></ToastPosition> 

    <ToastButtons> 

        <ToastButton Content="Ok" OnClick="@ProcessToast" CssClass="e-toast-button"></ToastButton> 

    </ToastButtons> 

</SfToast> 

 

<style> 

    .e-toast-button { 

        border-radius: 5px; 

        background-color: #D1542A !important; 

    } 

    .e-toast-container .e-toast .e-toast-message .e-toast-actions { 

        text-align: center; 

    } 

</style> 

 

Query 2: “How do I get the toast to be shown until the button is clicked and not timeout” 

 

This can be achieved by setting the `Timeout` and `ExtendedTimeout` property to `0`. We have prepared a sample for your reference, 

 

Code Snippet: 

 

<SfToast @ref="ToastObj" ID="toast_type" Title="Toast Title" Timeout=0 ExtendedTimeout="0"> 

    <ToastPosition X="@PositionX" ></ToastPosition> 

    <ToastButtons> 

        <ToastButton Content="Ok" OnClick="@ProcessToast" CssClass="e-toast-button"></ToastButton> 

    </ToastButtons> 

</SfToast> 

 

Sample: https://www.syncfusion.com/downloads/support/forum/162366/ze/Toast_Sample1676928014 

 

Please check the above code snippets and the sample and let us know if it satisfies your requirement. 

 

Regards, 

Revanth 

[Millard Harris]

Revanth,

Both of the solutions worked perfectly!  I appreciate your help immensely.

Regards,

Millard

[Revanth Krishnan]

Hi Millard, 

 

Thanks for the update. 

 

We are glad that you are satisfied with the provided solution, please let us know if you need any further assistance. 

 

Regards, 

Revanth