All Blazor website popups show on top of the page

Question

I have a RadzenColorPicker, RadzzenDatePicker, Bootstrap 5 Popover, Open on top of pages.

So I did a test to verify it is not from any other CSS or JavaScript files causing the problem.

This is my test layout:

@inherits LayoutComponentBase
@implements IDisposable

<div class="container-fluid">
    @if (!string.IsNullOrEmpty(direction))
    {
        <HeadContent>
            <link href=@($"css/radzen/default-{direction}-4.9.1.css") rel="stylesheet" />
        </HeadContent>

        <RadzenDialog />
        <RadzenNotification />
        <RadzenTooltip />
        <RadzenContextMenu />

        <div dir="@direction">@Body</div>
    }
</div>


@code {

    protected override async Task OnParametersSetAsync()
    {
        await base.OnParametersSetAsync();
    }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();


    }


    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);

        if (firstRender)
        {
            string language = await jsInterop.GetProperty("Language");
            if (string.IsNullOrEmpty(language))
            {
                await jsInterop.SetProperty("Language", "en");
                cultureChanger.ChangeCulture("en");
            }
            else
            {
                cultureChanger.ChangeCulture(language);
            }

            GetLanguageValues();
        }

    }

    public async void Dispose()
    {
    }


    string direction = "";
    private async Task GetLanguageValues()
    {
        viewData.Language = textService.GetText(cultureChanger.Current, "lang");
        direction = textService.GetText(cultureChanger.Current, "Direction");
        StateHasChanged();
   }
}

The _Host.cshtml file doesn't have any CSS links and has these JavaScript lines:

<script src="_framework/blazor.server.js"></script>
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
<script src="scripts/interop.js"></script>

interop has some JavaScript code I call from a dialog layout.

And finally this is my Test.cshtml file that uses this layout and _Host:

@page "/test"
@layout DialogLayout

<h3>Test</h3>

<br /><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<RadzenColorPicker @bind-Value="color">

</RadzenColorPicker>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

@code {
    string color = null;
}

And with this setup, the ColorPicker popup appears on top of the page. What causes this problem and how can I solve this?

Answer 1

The reason was I wrongly added a style element outside the html element inside _Host.cshtml. This caused popups (even radzen dropdowns) to behave like that.