ElementPlus Dialog fullscreen 设置全屏属性 屏幕下方空白的问题

最新推荐文章于 2024-06-02 15:10:46 发布
最新推荐文章于 2024-06-02 15:10:46 发布
阅读量823 收藏 8
点赞数 8
文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44658109/article/details/135568594
版权

文章目录

设置Dialog fullscreen属性后内部元素无法完全铺满屏幕下方红色区域为空白

在这里插入图片描述

问题发现

找到Dialog控件部分后把下面的样式属性一个一个全部取消后发现是因为.el-dialog_body 这个class里面的max height：calc(90vh-111px) !important;这个属性导致的
多次测试目前没有找到有效的解决方案（不改动源码的情况下）
在这里插入图片描述

问题解决方案

通过修改源码的方式解决问题
通过全局检索找到element-ui.scss 这个文件里面的这个属性 然后修改
在这里插入图片描述

问题解决

在这里插入图片描述

weixin_44658109
关注
  • 8
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
QT笔记--标准对话框与自定义对话框
中华田园巨龙
11-20 419
QT标准对话框   QT提供了默认的五种对话框，分别为以下对话框类   其中从上到下分别为 1、文件对话框 2、颜色对话框 3、字体对话框 4、输入对话框 5、消息框 标准对话框调用方式 void Dialog::on_btnOpen_clicked() { //选择单个文件 QString curPath=QDir::currentPath();//获取系统当前目录 //获取应用程序的路径 QString dlgTitle="选择一个文件"; //对话框标题 QStrin
Dialog全屏,去掉状态栏的方式
08-19
主要介绍了Dialog全屏,去掉状态栏的方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Dialog全屏设置
热门推荐
Kilnn
08-20 1万+
一、Dialog的全屏设置关于Dialog的全屏设置，网上一大把的方法，但是大多数都不全面或者有一些冗余的设置。这里列出一个最基本的全屏设置方式。public class FullScreenDialog extends Dialog { public FullScreenDialog(@NonNull Context context) { super(context);
vue element-ui 导航做全屏 取消全屏功能_element ui fullscreen
2401_84434442的博客
04-29 266
/ 检查浏览器是否支持全屏。
element + vue 关于全屏screenfull用法以及遇到的问题
m0_54850467的博客
03-11 3005
一.安装screenfull 1.npm install screenfull 直接安装的是最高版本的 下载的时候没报错，引用screenfull的时候就报这个错了 说是webpack.confing 文件不支持最新版本的语法问题 2.卸掉后换成5.1.0 npm install --save-dev screenfull@5.1.0 换成5.1.0 就可以了 二.封装screenfull组件 这里我因为项目需要 部分页面全屏 如果不需要直接 screenfull.toggle(); <templa
修改element-ui源码给el-dialog添加全屏功能
Moon Star
09-15 3510
修改elementUI代码为dialog添加全屏功能
element-ui dialog弹窗增加全屏功能
Mr.Tang的博客
12-24 1万+
完成效果图： 一、定义全局变量 dialogFull 用来控制弹窗 dialogFull:false, 二、dialog标签添加全局属性绑定 :fullscreen="dialogFull" 三、设置title区域的自定义 <template slot="title"> <div class="avue-crud__dialog__header"> <span class="el-dialog__title">
element技巧之element的dialog弹出框可拖拽、可拉伸、可全屏并处理边界问题
07-03 4481
directives: { // v-dialogDrag: 弹窗拖拽+水平方向伸缩 dialogDrag: { bind(el, binding, vnode, oldVnode) { let _this = this; //弹框可拉伸最小宽高 let dialogTables = null; let minWidth =.
将el-dialog设置为全屏（ :fullscreen=“true“）后还是存在遮罩层和滚动条
weixin_60886885的博客
12-29 1663
解决：将el-dialog的margin设置为0即可。
全面屏ios底部留白问题解决（记录下）
m0_37655944的博客
11-23 1604
在meta viewport标签里加属性：viewport-fit=cover；如下 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" /> 引入自
Jquery中dialog属性小记
12-12
代码如下: $(‘#dialogDiv’).dialog( { hide:true, //点击关闭是隐藏,如果不加这项,关闭弹窗后再点就会出错. autoOpen:false, height:380, width:800, modal:true, //蒙层（弹出会影响页面大小） title:’开标人’,...
Android Dialog全屏显示、动画显示
06-24
android点击相机和图片选择用到自定义Dialog
CommonDialog打印对话框允许设置打印机属性补丁vbprndlg
12-09
CommonDialog打印对话框允许设置打印机属性补丁vbprndlg
浅析JQuery UI Dialog的样式设置问题
01-19
最近在用一个JQUERY UI Dialog的插件，感觉特别强大，但样式设置比较麻烦，研究了俩天终于搞定了。 运行插件，需要的环境如下 [removed][removed] [removed][removed] <link href=”CSS/themes/redmond/jquery.ui...
vue组件底部空白问题
qq_42200700的博客
03-01 1296
今天遇到一个页面添加组件 列表页下方还存在整页空白的问题 其实是个小问题但也记录下吧 最开始代码如下图 这时候页面已经出现空白 解决呢也很简单用v-if添加在最外层的section内即可 原理就是在外层包裹的标签也得加上v-if 不点击时不渲染出来就不会留白 ...
Vue3项目练习详细步骤(第三部分：文章分类页面模块)
dafsq的博客
05-29 764
Vue3项目练习详细步骤(第三部分：文章分类页面模块)
elementUI type=“selection“多选框选中 删除 回显 赋值问题 回显数组改变选中状态未改变
夏微微的博客
05-29 311
注意：:reserve-selection="true"会记录保存上一次选中的状态，所以每次赋值前要先清空选中状态。解决：@row-click配合:reserve-selection="true"使用。遇到的问题：删除之后查询列表selection回显问题。表格data赋值的地方添加。可删除可重新查询列表添加。
Vue中引入elementUI中的container组件失效
最新发布
weixin_42171832的博客
06-02 245
1.不用修改官网中任何css或者html。2.按需引入，不是只是引入官网的就可以。
【区分vue2和vue3下的element UI InputNumber 计数器组件，分别详细介绍属性，事件，方法如何使用，并举例】
xiejunlan的博客
05-31 839
在 Vue 2 中，Element UI 提供了组件作为计数器组件，用于处理数字输入。而在 Vue 3 中，Element Plus 同样提供了类似的组件，但可能有一些属性、事件或方法的细微差异。下面我将分别介绍 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中组件的属性、事件和方法，并给出示例。
elementplus Dialog 对话框如何设置高度
06-06
要设置 ElementPlus 的 Dialog 对话框的高度，可以使用 `height` 属性。例如： ```html <el-dialog title="提示" :visible="dialogVisible" :close-on-click-modal="false" :height="300"> <span>这是一段信息</span> </el-dialog> ``` 在上面的例子中，将 Dialog 对话框的高度设置为了 300 像素。你可以根据需要自行调整高度值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值