DxToastProvider.StickToViewport Property

Specifies whether toast notifications are anchored to the viewport or the provider’s container.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

[Parameter]
public bool StickToViewport { get; set; }

Property Value

Type	Description
Boolean

true to anchor toast notifications to the viewport; false to anchor toast notifications to the provider’s container.

Remarks

The toast provider displays toast notifications anchored to the nearest provider parent container that has relative position (position: relative). When a user scrolls the page, notifications are scrolled out with the parent container.

Set the StickToViewport property to true to achor toast notifications to the viewport. When a user scrolls the page, notifications remain in the same place on the screen.

Use HorizontalAlignment and VerticalAlignment properties to position toast notifications in the container or viewport.

Razor
CSS

razor

<DxButton Text="Show toasts" Click="CreateToast" />
<div class="a">
    <div class="b">
        <p> Lorem ipsum dolor sit amet ...</p>
        <DxToastProvider Name="Provider1" Sticky="false" />
        <DxToastProvider Name="Provider2" Sticky="true" />
    </div>
    <p> Lorem ipsum dolor sit amet ...</p>
</div>
@code {
    [Inject] IToastNotificationService ToastService { get; set; }

    private void CreateToast() {
        ToastService.ShowToast(new ToastOptions {
            ProviderName = "Provider1",
                Text = "StickToViewport = false",
        });
        ToastService.ShowToast(new ToastOptions {
            ProviderName = "Provider2",
                Text = "StickToViewport = true",
        });
    }
}

css

div.a {
    position: relative;
    height: 2000px;
    border: 1px solid gray;
}
div.b {
    position: relative;
    height: 100px;
    border: 1px solid gray;
}