【vue+element ui】大屏自适应中el-select下拉内容在低分辨率下显示不全问题解决

目录

背景

现象

解决方案


背景

最近要把一个1920px*1080px的大屏改成自适应的;最低适配到1028px*720px;

现象

自适应适配改完之后

将电脑屏幕改成1028px*720px分辨率后,下拉显示正常

通过谷歌浏览器设置Toggle device toolbar为1028px*720px分辨率,下拉显示异常

其他页面的下拉框都受到影响

解决方案

使用F12对比查看,发现el-select中的el-select-dropdown__item是固定的;

解决办法:将el-select-dropdown__wrap改大,让内容全部显示出来;

全局设置,代码如下(项目中使用到的是scss)

复制代码
/deep/.el-select-dropdown__wrap {
  max-height: 100% !important;
}

页面下拉可以全部显示,如下

相关推荐
从零开始学习人工智能17 小时前
快速搭建B/S架构HTML演示页:从工具选择到实战落地
前端·架构·html
虫虫rankourin17 小时前
在 create-react-app (CRA) 创建的应用中使用 react-router-dom v7以及懒加载的使用方法
前端·react.js
小刘鸭地下城17 小时前
Web安全必备:关键 HTTP 标头解析
前端
yddddddy17 小时前
html基本知识
前端·html
不要再敲了18 小时前
JavaScript与jQuery:从入门到面试的完整指南
javascript·面试·jquery
荣达18 小时前
koa洋葱模型理解
前端·后端·node.js
xiaoyan201518 小时前
Electron38-Winchat聊天系统|vite7+electron38+vue3电脑端聊天Exe
vue.js·electron·vite
reembarkation18 小时前
使用pdfjs-dist 预览pdf,并添加文本层的实现
前端·javascript·pdf
reembarkation18 小时前
vue-pdf 实现blob数据的预览
javascript·vue.js·pdf
李明卫杭州19 小时前
JavaScript中的dispatchEvent方法详解
javascript