Blazored Modal modals appear above the calling page rather than overlaying the page

Question

I'm using Blazored Modal modals in a Blazor server app and the modals are positioned above the calling page rather than overlaying it.

App.razor:

<CascadingAuthenticationState>
    <CascadingBlazoredModal Class="custom-blazored-modal">
        <Router AppAssembly="@typeof(Program).Assembly">
            <Found Context="routeData">
                <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(GridLayout)" />
            </Found>
            <NotFound>
                <LayoutView Layout="@typeof(GridLayout)">
                    <p>Sorry, there's nothing at this address.</p>
                </LayoutView>
            </NotFound>
        </Router>
    </CascadingBlazoredModal>
</CascadingAuthenticationState>

site.css:

.custom-blazored-modal {
    display: flex;
    z-index: 102;
    flex-direction: column;
    background-color: #F5EFE7;
    border-radius: 0px;
    border: 4px solid #660624;
    width: 100%;
    padding: 1rem;
}

Example of method to display a modal:

    // Open the modal dialog to add a new notebook.
    async Task AddNotebookAsync_Click()
    {
        // Add a notebook via a dialog.
        var parameters = new ModalParameters();
        var options = new ModalOptions()
            {
                HideCloseButton = true,
                DisableBackgroundCancel = true
            };
        var addNotebookModal = Modal.Show<AddNotebookModal>(null, parameters, options);

        var result = await addNotebookModal.Result;

        // If the user cancelled, exit.
        if (result.Cancelled)
        {
            return;
        }

        this.StateHasChanged();

        return;
    }

Example of what is displayed:

The code appears to be virtually the same as in other apps where it works (the modal overlays the calling page). I tried changing the z-index but with no effect.

Answer 1

Make sure that you are using CSS Isolation in your app as that can easily be forgotten with Blazor and break many things.

Blazored Modal uses CSS isolation. If your application is already using CSS isolation then the styles for Modal will be included automatically and you can skip this step. However, if your application isn't using isolated CSS, you will need to add a reference to the CSS bundle. You can checkout the Microsoft Docs for additional details.

<link href="{YOUR APP ASSEMBLY NAME}.styles.css" rel="stylesheet">