Radzen 弹出窗口出现在页面底部

问题描述 投票:0回答:1

我正在使用 Radzen Popup 组件,但弹出内容显示在页面底部页脚下方。

这是我的代码:

<RadzenButton @ref=button Text="Pop Up" Click="@(args => popup.ToggleAsync(button.Element))" />
<Popup @ref=popup Lazy="true" Open="@OnOpen">
                
    <RadzenStack Orientation="Orientation.Vertical">
        <RadzenButton Text="tes1" />
        <RadzenButton Text="tes2" />
    </RadzenStack>
                
</Popup>

@code {
    RadzenButton button;

    private Popup popup;

    async Task OnOpen()
    {
        await JSRuntime.InvokeVoidAsync("eval", "setTimeout(function() {}, 200)");

    }
}

我正在使用服务器端渲染模式。有谁知道我在这里错过了什么?

c# blazor blazor-server-side radzen
1个回答
1
投票

根据Radzen Popup demo,您可以通过提供CSS规则来自定义使用

Style
属性显示的弹出窗口的位置。

如果你想在网页中央或特定位置显示弹窗,关键点是

position: absolute

<Popup @ref=popup Lazy="true" Open="@OnOpen"
    Style="display:none; position:absolute; height:300px;width:600px;">
                
    <RadzenStack Orientation="Orientation.Vertical">
        <RadzenButton Text="tes1" />
        <RadzenButton Text="tes2" />
   </RadzenStack>
</Popup>
© www.soinside.com 2019 - 2024. All rights reserved.