Toast and Offcanvas

[cmorgado]

When I open a offcanvas ex: right side and then try to open a Toast in the top right, the toast end up being "hidden" below the offcanvas

Expected behavior The Toast should be on top of offcanvas

NET 8.0 Blazor Interactive Render Mode: Server

[gvreddy04]

@cmorgado Thank you for using BlazorBootstrap. I'm not able to reproduce the issue. Please share a sample code or a GitHub repo with minimal steps to reproduce the issue.

Example 1:

<Offcanvas @ref="offcanvas"
           title="Offcanvas title"
           OnShowing="OnOffcanvasShowing"
           OnShown="OnOffcanvasShown"
           OnHiding="OnOffcanvasHiding"
           OnHidden="OnOffcanvasHidden">

    <BodyTemplate>
        <div>Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</div>
    </BodyTemplate>

    <FooterTemplate>
        <Button Color="ButtonColor.Primary" @onclick="OnHideOffcanvasClick">Hide Offcanvas</Button>
    </FooterTemplate>

</Offcanvas>

<Button Color="ButtonColor.Primary" @onclick="OnShowOffcanvasClick">Show offcanvas</Button>

<Toasts class="p-3" Messages="messages" AutoHide="true" StackLength="3" Placement="ToastsPlacement.TopRight" />

@code {
    private Offcanvas offcanvas = default!;

    List<ToastMessage> messages = new List<ToastMessage>();

    private void ShowMessage(ToastType toastType, string message)
        => messages.Add(CreateToastMessage(toastType, message));

    private ToastMessage CreateToastMessage(ToastType toastType, string message)
        => new ToastMessage
            {
                Type = toastType,
                Title = "Blazor Bootstrap",
                HelpText = $"{DateTime.Now}",
                Message = $"Event {message}. DateTime: {DateTime.Now}",
            };

    private async Task OnShowOffcanvasClick() => await offcanvas.ShowAsync();
    private async Task OnHideOffcanvasClick() => await offcanvas.HideAsync();

    private void OnOffcanvasShowing() => ShowMessage(ToastType.Primary, "Event: Showing");
    private void OnOffcanvasShown() => ShowMessage(ToastType.Secondary, "Event: Shown");
    private void OnOffcanvasHiding() => ShowMessage(ToastType.Success, "Event: Hiding");
    private void OnOffcanvasHidden() => ShowMessage(ToastType.Danger, "Event: Hidden");
}

Screenshot:

Example 2:

<Offcanvas @ref="offcanvas"
           title="Offcanvas title"
           OnShowing="OnOffcanvasShowing"
           OnShown="OnOffcanvasShown"
           OnHiding="OnOffcanvasHiding"
           OnHidden="OnOffcanvasHidden">

    <BodyTemplate>
        <div>Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</div>
    </BodyTemplate>

    <FooterTemplate>
        <Button Color="ButtonColor.Primary" @onclick="OnHideOffcanvasClick">Hide Offcanvas</Button>
    </FooterTemplate>

</Offcanvas>

<Button Color="ButtonColor.Primary" @onclick="OnShowOffcanvasClick">Show offcanvas</Button>

@code {
    private Offcanvas offcanvas = default!;

    [Inject] ToastService ToastService { get; set; } = default!;

    private async Task OnShowOffcanvasClick() => await offcanvas.ShowAsync();
    private async Task OnHideOffcanvasClick() => await offcanvas.HideAsync();

    private void OnOffcanvasShowing() => ToastService.Notify(new(ToastType.Primary, "Event: Showing"));
    private void OnOffcanvasShown() => ToastService.Notify(new(ToastType.Success, "Event: Shown"));
    private void OnOffcanvasHiding() => ToastService.Notify(new(ToastType.Danger, "Event: Hiding"));
    private void OnOffcanvasHidden() => ToastService.Notify(new(ToastType.Warning, "Event: Hidden"));
}

Screenshot: