Element UI 弹窗(Dialog)改成自适应高度,仅body内容部分滚动

摘要:
定义样式如下:.abow_dialog{display:flex;justify-content:center;align-items:Center;overflow:hidden;.el-dialog{margin:0auto!important;height:90%;overflow:hidden;.el-dialog__body{position:absolute;left:0;top:54px;bottom:0;right:0;padding:0;z-index:1;overflow:hidden;overflow-y:auto;}}在el-dialog标签中设置class="abow_dialog"即可弹窗为页面高度的90%,且上下居中。el-dialog__body内容部分会根据内容的高度,自动显示上下的滚动条。

定义样式如下:

.abow_dialog {
    display: flex;
    justify-content: center;
    align-items: Center;
    overflow: hidden;
    .el-dialog {
        margin: 0 auto !important;
        height: 90%;
        overflow: hidden;
        .el-dialog__body {
            position: absolute;
            left: 0;
            top: 54px;
            bottom: 0;
            right: 0;
            padding: 0;
            z-index: 1;
            overflow: hidden;
            overflow-y: auto;
        }
    }

在el-dialog标签中设置class="abow_dialog"即可

弹窗为页面高度的90%,且上下居中。

el-dialog__body内容部分会根据内容的高度,自动显示上下的滚动条。
我项目中使用需要固定一部分搜索
Element UI 弹窗(Dialog)改成自适应高度,仅body内容部分滚动第1张

/* 查询客户弹窗自适应大小 */
.abow_dialog {
    display: flex;
    justify-content: center;
    align-items: Center;
    overflow: hidden;
}
.el-dialog {
    margin: 0 auto !important;
    height: 90%;
    overflow: hidden;
}
.el-dialog__body {
    position: absolute;
    left: 20px;
    top: 54px;
    bottom: 72px;
    right: 0;
    padding: 0;
    z-index: 1;
    overflow: hidden;
    overflow-y: auto;
}
.customerSearch{
    position: sticky;
    top: 0;
    z-index: 3;
}
.el-dialog__footer{
    position: absolute;
    left: 0;
    bottom: 40px;
    right: 54px;
    padding: 0;
    z-index: 2;
}

免责声明:文章转载自《Element UI 弹窗(Dialog)改成自适应高度,仅body内容部分滚动》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇【NS-3学习】ns3-模拟基础:关键概念,日志,命令行参数android studio如何查看数据库文件下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Bootstrap:弹出框和提示框效果以及代码展示

一、Bootstrap弹出框 使用过JQuery UI的园友们应该知道,它里面有一个dialog的弹出框组件,功能也很丰富。与jQuery UI的dialog类似,Bootstrap里面也内置了弹出框组件。打开bootstrap 文档http://v3.bootcss.com/components/可以看到它的dialog是直接嵌入到bootstrap.j...

iframe高度自适应

前两天在网上看到了一道面试题,问iframe高度自适应的问题。发现自己之前几乎没有关注过iframe的问题,所以在这里记录一下。 原题目是: 页面A的域名是:http://www.taobao.com,页面B的域名是http://www.tmall.com,如果A使用iframe引用页面B,如何做到iframe的高度自适应(即B内容有多高,iframe就有...

APP 半自适应 WEB页面

特别赶,响应式纯自适应的,有空写了新的发。 (在手机上看,页面上看一定乱) <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv=...

css 高度自适应

对象height:100%并不能直接产生效果,是因为跟其父对象有关。 #center{height:100%;} 上面的css样式是无效的,不会产生任何效果。 需要改写: html,body{ margin:0px; height:100%;}#center{200px;height:100%;background-color:#666666...

react 中echarts-for-react使用 自适应div

import * as React from 'react' import ReactEcharts from 'echarts-for-react' export interface IProps { } interface IState { } class CapitalBudget extends React.Component<...

pyqt 窗口的调用

关于Pyqt窗口调用的格式 正常设计两个ui文件 正常Pyuic转成.py 在唯一的 run.py 函数里这样写即可实现窗口调用 import ... from Timer2 import Ui_Form # Timer2为主ui对于py文件的名字 from TimerSetup import Ui_Form as UISetup # Timer...