这段代码通过计算视口高度(100vh)并减去一定值(如200px),来设置.el-dialog__body的最大高度,并在内容超出时启用垂直滚动条。 2. 使用Element UI的width和height属性 虽然width和height属性主要用于设置对话框的宽度和高度,但它们也可以间接影响滚动条的行为。当设置了固定的宽度和高度后,如果内容超出这些限制,滚动...
优先发现的问题是,element plus中的el-dialog是内容优先的,即有多少内容高度就有多高。 太多的内容会导致总体页面出现滚动条。 而一般的管理系统,可以出现固定条的地方可能是弹窗中的内容,而不是整个页面 而弹窗中,下方的提交、取消按钮,是不动的。 也就是说,我现在希望弹窗中的内容根据内容大小出现滚动条,整个页...
使用方案一或者方案二,同时把原始滚动条的样式改成element-ui的 // 滚动条的宽度::-webkit-scrollbar {// opacity: 0;transition: opacity340msease-out;width:6px;cursor: pointer;background-color: yellow;// &:hover {// opacity: 1;// }}// 滚动条的设置::-webkit-scrollbar-thumb {display: bloc...
vue3 设置el-dialog height超过滚动条 方法一: <stylescoped>::v-deep .el-dialog .el-dialog-body{height:500px;overflow-y:auto;}</style> 如果要设置动态的高度话,则要在setup里面设置 <script>exportdefaultdefineComponent({ setup:{ const cssContent=ref({height:'100%',overflowY:''}) const init=(...
el-dialog主体区域添加了el-scrollbar滚动条,为什么el-dialog必须设置固定高度(比如height:100%)才能滚动?否则滚动条就无效?感觉不适合写死高度啊,应该根据内容自动调整高度,但是不能超出一个屏幕高度 element-ui 有用关注1收藏 回复 阅读2.7k 1 个回答
之前项目里有用到elementUI的弹窗的,总是自动超出隐藏然后滚动条,刚开始不知道怎么处理,都是自己新写一个弹窗使用,其实是有解决方法的,只是当时没找到: 依照elementUI文档给dialog添加了 custom-class 之后利用 ::v-deep 穿透,在css中添加以下代码就能实现高度超出了:...
简介:el-dialog中内容自定义滚动条 上代码 dialog中嵌套div,给div设置高度,并且overflow属性为auto,布局如下图: .sketch_content {// 必须有高度 overflow 为自动overflow: auto;height: 434px;border-top: 1px solid #eff1f4;border-bottom: 1px solid #eff1f4;padding: 0px 30px 11px 27px;}// 滚动条...
Element UI 弹窗(Dialog)改成自适应高度,仅body内容部分滚动 简单的定位实现过程 给想要自适应高度的div设置position:absolute;top:0;left:0;right:0;bottom:0;(具体距离设置看情况设定) .abow_dialog { display: flex; justify-content: center; align-items: Center; ...
当 fullscreen 的值为 true 时,对话框将以全屏模式显示;当 fullscreen 的值为 false 时,对话框将按照设置的宽度和高度显示。这一参数可用于特殊场景下的特殊需求,使得对话框的显示更加灵活多样。 六、lockScroll 参数 lockScroll 参数用来设置是否锁定对话框的滚动条。当 lockScroll 的值为 true 时,对话框将锁定...
// 大弹窗 滚动 .el-dialog__wrapper.big-dialog__wrapper { line-height: 1; .el-dialog { margin: 8vh auto 8vh !important; .el-dialog__header { } .el-dialog__body { } .edit-form-footer { margin-top: 40px; } } &::-webkit-scrollbar { display: none; } } // 小弹窗 居中 ....