以下是对el-dialog滚动条问题的详细解答,包括可能的原因、官方文档的相关属性、以及具体的解决方案。 一、可能的原因 内容溢出:当el-dialog的内容超过其可视区域时,浏览器会自动添加滚动条以确保用户可以查看全部内容。 定位方式:el-dialog的定位方式(如fixed或absolute)可能会影响滚动条的出现。 body样式未处理:在el...
-webkit-overflow-scrolling:touch,这个属性会让滚动条产生回弹效果,让滚动没有那么生硬。 在MDN上是这么定义这个属性的: -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。 touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移...
复现原因 假设有5条内容,打开一项内容通过el-dialog进行展示,当出现滚动条后,往下滑动,紧接着通过esc或遮罩进行关闭,打开另一项内容,这时候滚动条并未进行置顶。 解决方法 参考就行了。 js部分 const data = reactive({ newsDialog: { show: false, currentNews: null, } }) const refNewsDialog = ref(null...
滚动条本身就是因为盒子固定高度, 内容超出盒子, 为了方便查看未出现的, 如果不固定高度overflow: auto等是不会生效的的.根据你的需要可以这样做, 在钩子函数mouted中获取当前屏幕的可视区域高度, 根据自己的需要减去一些然后将这高度height设为最大高度: max-height: height就可以既做到自适应高度又做到超出屏幕 有...
如果设置了append-to-body=true,然后再设置当el-dialog的内部的滚动条时,会出现设置不上的情况,因为此时的el-dialog是挂载到body上的,不在.complainInfo父级样式的控制下。 补充:Z-index 仅能在定位元素上奏效 !!! z-index元素的position属性要是relative,absolute或是fixed。 z...
于是目前考虑使用固定高度的方式来处理。 优先发现的问题是,element plus中的el-dialog是内容优先的,即有多少内容高度就有多高。 太多的内容会导致总体页面出现滚动条。 而一般的管理系统,可以出现固定条的地方可能是弹窗中的内容,而不是整个页面 而弹窗中,下方的提交、取消按钮,是不动的。
之后的效果:dialog上下左右在视口居中、过长body不在出现滚动条,开启内滚动(dialog最高100vh)
1.lockScroll为false是可以解决bug,但是内容多了会出现两条滚动条。2.参照网上body添加padding-right: 0 !important不起作用。3.用overflow: hidden是会导致数据显示不完全无法出现滚动条。4.tagView已经设置了padding-right: 15px。5.用的是vue-element-admin模板. ...
最近因为业务需求,需要对element的el-dialog组件实现拖拽功能,在网上搜索了下,资料很多,不过这其中也有一些小坑,这里记录下。主要参考以下两篇文章element-ui dialog组件添加可拖拽位置 可拖拽宽高和JavaScript限定范围拖拽及自定义滚动条应用(3)。 首先还是要明确几个概念,这里通过修改css并截图给大家介绍下,理解了这...