如何修改Blazor中TelerikMultiSelect的弹出框高度？

嗨，我之前也踩过这个坑！你用JQuery调用kendoMultiSelect设置高度的方式不生效，是因为Blazor的Telerik组件是基于Blazor的渲染模型封装的，直接用脚本操作DOM要么时机不对（组件还没渲染完），要么会被Blazor组件的内部状态管理给覆盖掉，完全没必要绕这个弯路~

其实Telerik Blazor的MultiSelect组件本身就自带了控制弹出框高度的参数，不用写额外的JQuery脚本，直接在Razor代码里设置就行：

方法1：直接使用组件原生的PopupHeight参数 #

这是最简单直接的方式，你只需要在TelerikMultiSelect标签里添加PopupHeight属性，设置你想要的高度值（比如1000px）就可以了：

<TelerikMultiSelect Data="@ClaimsList" 
                    @bind-Value="@EditModel.UserClaims" 
                    ValueField="value" 
                    TextField="value" 
                    Placeholder="Select Claims" 
                    Id="claims-multiselect"
                    PopupHeight="1000px">
</TelerikMultiSelect>

方法2：自定义CSS样式（更灵活的场景） #

如果需要更精细的样式控制，你可以给弹出框指定一个自定义类，然后通过CSS来调整高度：

1. 给组件添加PopupClass参数，指定自定义类名：

<TelerikMultiSelect Data="@ClaimsList" 
                    @bind-Value="@EditModel.UserClaims" 
                    ValueField="value" 
                    TextField="value" 
                    Placeholder="Select Claims" 
                    Id="claims-multiselect"
                    PopupClass="custom-multiselect-popup">
</TelerikMultiSelect>

2. 在你的全局CSS文件（比如wwwroot/css/site.css）里添加对应的样式：

.custom-multiselect-popup {
    height: 1000px !important;
    max-height: 1000px !important;
}

你之前看到的ItemHeight参数是用来控制下拉列表中每一项的高度的，和弹出框的整体高度不是一回事，所以直接用PopupHeight就对啦。

内容来源于stack exchange