MudBlazor Dialog не отображается в центре страницы

Question

MudDialog не отображается в центре страницы вот код Home.razor

@page "/"
@rendermode InteractiveServer

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.
<style>
    .center-dialog {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh; /* Занимает всю высоту окна */
    }
</style>
<MudDialogProvider
    Position="DialogPosition.Center"/>

<div class="d-flex">
    <MudButton OnClick="OpenDialog" Variant="Variant.Filled" Color="Color.Primary">
        Edit rating
    </MudButton>
    <MudRating SelectedValue="_rating" Disabled="true" Class="mt-1 ml-3" />
</div>
<div class="center-dialog">
    <MudDialog @bind-Visible="_visible" Options="_dialogOptions">
        <TitleContent>
            <MudText Typo="Typo.h6">
                <MudIcon Icon="@Icons.Material.Filled.Edit" Class="mr-3" /> Edit rating
            </MudText>
        </TitleContent>
        <DialogContent>
            <p>How awesome are inline dialogs?</p>
            <MudRating @bind-SelectedValue="_rating" Class="mt-3" />
        </DialogContent>
        <DialogActions>
            <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="Submit" Class="px-10">Close</MudButton>
        </DialogActions>
    </MudDialog>
</div>

@code {
    private bool _visible;
    private int _rating;
    private readonly DialogOptions _dialogOptions = new() { FullWidth = true };

    private void OpenDialog() => _visible = true;

    private void Submit() => _visible = false;
}

@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using BlazorApp3
@using BlazorApp3.Components
@using MudBlazor

и Program.cs

using BlazorApp3.Components;
using MudBlazor.Services;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();
builder.Services.AddMudServices();
var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();
app.UseAntiforgery();

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

app.Run();

App.razor

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <base href="/"/>
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css"/>
    <link rel="stylesheet" href="app.css"/>
    <link rel="stylesheet" href="BlazorApp3.styles.css"/>
    <link rel="icon" type="image/png" href="favicon.png"/>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
    <script src="_content/MudBlazor/MudBlazor.min.js"></script>
    <MudThemeProvider/>
    <MudPopoverProvider/>
    <MudDialogProvider/>
    <MudSnackbarProvider/>
    <HeadOutlet/>
</head>

<body>
<Routes/>
<script src="_framework/blazor.web.js"></script>
</body>

</html>

Сделал все по документации но все ровно не в центре

БЛОГ НА HUSL

MudBlazor Dialog не отображается в центре страницы

Ответы (0 шт):