Диалоги FluentUI и FluentStack не отображаются горизонтально ⇐ C#

[Anonymous]

Я новичок в Blazor и FluentUI (я гораздо лучше знаком с Desktop и WPF). Например, я использую компоненты FluentUI, чтобы попытаться создать диалоговое окно входа в систему. Диалоговое окно открывается правильно, но отдельные элементы диалогового окна отображаются вертикально, а не горизонтально:
[img]https://i.sstatic.net /JJ9C3u2C.png[/img]

Мой соответствующий код для создания диалога:

Код: Выделить всё

DialogParameters dialogParameters = new()
{
Title = "Login to Site",
PrimaryAction = "Ok",
PrimaryActionEnabled = true,
SecondaryAction = "Cancel",
SecondaryActionEnabled = true,
PreventDismissOnOverlayClick = true,
Width = "500px",
TrapFocus = true,
Modal = true,
PreventScroll = true
};

IDialogReference loginDialog = await DialogService.ShowDialogAsync(LoginRequest, dialogParameters);
DialogResult? result = await loginDialog.Result;

и мой компонент LoginDialog.razor:

Код: Выделить всё

implements IDialogContentComponent





Welcome! Please enter your
details below in order to login.

Username:
Password:


@code {
[Parameter] public LoginRequest Content { get; set; } = new(string.Empty, string.Empty);

[CascadingParameter] FluentDialog Dialog { get; set; } = default!;
}

Независимо от того, раскомментирую ли я этот код для пользовательского заголовка и включу ли я «Orientation="Orientation.Horizontal"», я получаю точно такой же результат. Функциональность диалогового окна великолепна, но «X» и «Вход на сайт» расположены вертикально, а не горизонтально.
То же самое произойдет, если я попытаюсь создать заголовок в моем MainLayout. .razor с использованием FluentLayout — элементы заголовка располагаются вертикально, а не горизонтально.
Все, что я могу думать, это то, что это какая-то проблема CSS (которая несколько выходит за рамки моего понимания). Я просмотрел раздел «Начало работы» на FluentUI, но либо что-то пропустил, либо что-то настроено неправильно. Раньше в том же проекте у меня были установлены некоторые компоненты SyncFusion, и с тех пор я удалил их, но позаботился о том, чтобы удалить ссылки на темы SF.
Это запущенный проект WebAssembly. на https и скомпилирован с использованием .NET 8 в JB Rider.

Подробнее здесь: https://stackoverflow.com/questions/790 ... rizontally