Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxToastProvider.StickToViewport Property

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

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[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
<style>
    div.a {
        position:relative;
        height: 2000px;
        border: 1px solid gray;
    }
    div.b {
        position: relative;
        height: 100px;
        border: 1px solid gray;
    }
</style>

<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",
        });
    }
}

See Also