elementUI的弹框el-dialog优化高度为视口高度
问题:elementUI的弹框el-dialog高度虽然是根据内容自动撑开,但是当内容很多的时候,往往下面的操作按钮会被遮挡,需要滚动条才能保存,用户体验极差。现在对弹框进行优化1、当内容不多的时候,弹框自动撑开高度就可以。2、内容很多的时候,弹框高度为视口高度的90%(90vh),中间内容区出现滚动条。// el-dialog高度自适应,内容超出时中间出现滚动条.common-dialog {d
·
问题:
elementUI的弹框el-dialog高度虽然是根据内容自动撑开,但是当内容很多的时候,往往下面的操作按钮会被遮挡,需要滚动条才能保存,用户体验极差。
现在对弹框进行优化
1、当内容不多的时候,弹框自动撑开高度就可以。
2、内容很多的时候,弹框高度为视口高度的90%(90vh),中间内容区出现滚动条。
// el-dialog高度自适应,内容超出时中间出现滚动条
.common-dialog {
display: flex;
justify-content: center;
align-items: Center;
overflow: hidden;
.el-dialog {
margin: 0 auto !important;
position: relative;
.el-dialog__header{
position: absolute;
left: 0;
top: 0;
right: 0;
width: 100%;
height: 60px;
z-index: 1;
}
.el-dialog__body {
width: 100%;
overflow: hidden;
overflow-y: auto;
max-height: 90vh;//最大高度为视口高度的90%
padding-top: 80px;
padding-bottom: 100px;
z-index: 1;
}
.el-dialog__footer{
position: absolute;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 80px;
z-index: 1;
}
}
}
更多推荐
已为社区贡献10条内容
所有评论(0)