zoukankan      html  css  js  c++  java
  • Element UI 弹窗(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内容部分会根据内容的高度,自动显示上下的滚动条。
    我项目中使用需要固定一部分搜索

    /* 查询客户弹窗自适应大小 */
    .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;
    }
    
  • 相关阅读:
    第2课 C 到 C++ 的升级
    第1课 学习 C++ 的意义
    归并排序
    插入排序与希尔排序
    选择排序
    冒泡排序
    CodeSignal 刷题 —— almostIncreasingSequence
    CodeSignal 刷题 —— matrixElementSum
    Python3 序列解包
    单星号变量(*)和双星号变量(**)的用法
  • 原文地址:https://www.cnblogs.com/axingya/p/14760885.html
Copyright © 2011-2022 走看看