FR报表下拉框高度调整解决方案
问题描述
在FR报表开发中，点击下拉框按钮后，下拉选项列表的高度太小，用户体验不佳。直接使用 $('.fr-combo-list').css("height","400px") 设置高度往往不生效，因为此时下拉选项还没有渲染到DOM中。
解决方案：jQuery动态添加CSS样式（推荐）
通过jQuery动态创建style标签并添加到页面头部，这样可以确保样式在下拉框出现时立即生效：
// 使用jQuery添加样式
function addComboStylesWithJQuery() {if (!$('#combo-height-style').length) {$('<style id="combo-height-style">').text(`.fr-combo-list {height: 400px !important;max-height: 400px !important;overflow-y: auto !important;}`).appendTo('head');}
}
使用方法：
- 写在在页面加载结束后事件就行
优点：
- 代码简洁，易于维护
- 性能优秀，一次设置持久有效
- 兼容性好，适用于大多数场景
- 避免了DOM监听的复杂性
其他可选方案
写一个css文件放到服务器上，然后引用这个css文件（理论上应该是最合适的，但是考虑到操作服务器文件有时候不一定方便）;其他如轮询监听等方式（搞复杂了）。