el-popup-parent--hidden 弹框bug问题

最新推荐文章于 2024-07-09 09:36:44 发布
最新推荐文章于 2024-07-09 09:36:44 发布
阅读量4.1k 收藏 3
点赞数 3
文章标签： bug css 前端 vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AreYouOkLei/article/details/123529143
版权

问题：点击弹框body添加个class：el-popup-parent--hidden并赋予样式padding-right: 5px;

结果：打开弹狂 盒子向右自动5px，关闭弹窗 盒子向左回归原来位置；

解决：在app.vue页面 或者全局的样式里面 给body样式添加

padding-right: 0px !important;

overflow: hidden !important;

注：给el-popup-parent--hidden设置padding-right: 0px !important;overflow: hidden !important 无效 必须要给body设置样式

我该如何继续前行
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
flycheck-popup-tip：使用popup.el显示Flycheck错误消息
02-05
而`flycheck-popup-tip`是Flycheck的一个扩展，用于通过`popup.el`库来更优雅地展示错误和警告消息。本文将详细介绍`flycheck-popup-tip`的功能、安装、配置以及它如何与`popup.el`协同工作，帮助提升Emacs的使用...
react-native-popup-menu:React Native的弹出菜单
05-02
react-native-popup-menu·特征定位方式描述快速定位允许将菜单对齐到任何元素的边框坚持元素的中心允许按元素宽度的中心显示菜单动态定位允许将动态偏移量添加到基本菜单位置位置限制自动应用约束，以永不超越屏幕...
vue 中使用 elementUI 的 MessageBox 弹框时，页面 body 会自动加上内联样式 style=“padding-right: 17px；“ 的解决方法
weixin_61769998的博客
08-14 1227
vue 中使用 elementUI 的 MessageBox 弹框时，页面 body 会自动加上内联样式 style="padding-right: 17px;" 的解决方法
element el-dialog 引发的问题
CodeBoyDong的博客
03-29 2445
elementUI在打开dialog的时，页面右侧会出现滚动条，或是页面宽度会缩小，当关闭dialog后又恢复原样，控制台检查后发现当打开dialog时，body元素会有class=el-popup-parent--hidden的类名，关闭dialog后el-popup-parent--hidden类名消失，这应该就是造成页面出现滚动条或是宽度缩小的原因，查了一下资料发现有两种解决办法，我用的是第二种方法。1. 重写el-popup-parent--hidden的样式。
el-dialog修改默认内边距el-dialog__body解决方案
简单点的博客
11-16 1644
el-dialog修改默认内边距el-dialog__body解决方案
elementPlus关闭弹窗，页面原先滚动条消失
Stephy_Yy
03-09 906
一开始以为是弹窗内容超过一屏引起，改为一屏内也不能解决。 打开控制台，发现弹窗后自动给body标签加上了类el-popup-parent–hidden，关闭后也没去除，因此手动删除该类。 document.getElementsByTagName('body')[0].className = ''; ...
element-UI打开 dialog 抖动
Ton555555的博客
07-26 716
抖动原因： 1. body 多了一个class 属性el-popup-parent-hidden， 加上了padding-right：15px; 2.打开dialog 时， 通过右下角的div 盒子,确认盒子宽度有 1905px变成了1920px，相差15px; 解决办法： 在入口文件 public == index.html 中 加上样式： body { padding-right: 0px !important; overflow: hidden; } .
ElementUI的el-dialog弹窗打开时css的bug
Queen-Shir的博客
12-18 3610
问题描述：el-dialog弹窗没打开时，页面有滚动条，会占据浏览器右侧15px左右的宽度。 dialog打开之后，遮罩层占整个浏览器的宽度，且没有滚动条。网页头部滚动条消失，导致网页头部向右移动15px左右。每次打开dialog网页头部就向右移动；关闭dialog网页头部就向左移动。直接影响美观。 解决方法：在项目的入口文件添加以下css。 <style lang=...
react-popup：React弹出组件
02-04
简单而强大的react弹出组件。... 如果还不存在问题，请打开一个问题随意讨论。安装使用npm（或yarn）安装它（ npm install react-popup --save ）。 该组件由API驱动，意味着您只能在全局级别上渲染一次。 这
popup-el:Emacs的可视弹出界面库
05-05
popup.el 概述 popup.el是Emacs的可视弹出... 另一个方法是使用popup-make-item函数，该函数仅在添加了其关键字的文本属性后返回字符串。 有效的文本属性是： value -这表示商品的实际价值。 当从某些同步函数（例如po
react-native-popup-menu：React Native的弹出菜单组件
01-31
上下文菜单，滑入式菜单弹窗安装npm install react-native-popup-menu --save如果您使用的是较旧的RN版本，请查看我们的兼容性表。基本用法将您的应用程序包装在MenuProvider ，然后在需要的地方简单使用Menu组件。...
vue中使用elementui的el-dialog遮罩问题
08-29 3986
elementui中的el-dialog有时候会出现以下这种问题，内容在遮罩阴影之下的情况 解决这种情况的方法很简单，在el-dialog标签中添上这个:append-to-body="true"属性即可，如下： :append-to-body="true"
el-dialog 弹窗弹出，导致两个滚动条，影响用户体验
weixin_39418338的博客
06-21 5998
el-dialog 弹窗弹出，导致两个滚动条，影响用户体验
VUE+ElementUI 多选框/单选框鼠标hover悬浮时的提示信息组件
qq_45726323的博客
06-27 3378
VUE+ElementUI+js编写一个多选框/单选框，当鼠标hover悬浮时的提示信息组件。
若依框架前端切换TagView时刷新问题
热门推荐
luochengbang的专栏
02-04 1万+
改造若依框架点击tag切换时都是刷新问题。点击顶部tag切换时，永远都是刷新的。刷新问题两种情况：普通view切换时刷新及iFrame切换刷新
解决el-dialog弹框出现页面抖动问题
最新发布
m0_69538493的博客
07-09 290
main.js(后只需要添加ElementUI.Dialog.props.lockScroll.default = false;添加 Dialog.props.lockScroll.default = false。
ElementUI 弹窗 bug（右侧出现滚动条）
workhard0905的博客
08-17 2325
ElementUI弹窗bug
Element-UI 对话框 显示偏移问题
yb305
04-27 1445
问题描述： 超出部分隐藏了滚动条 当显示dialog的时候，界面向左偏移出现一条空白区域 查看样式发现，body里被添加了一个padding-right:17px; 解决办法: 在全局样式中添加一下代码 .el-popup-parent--hidden { padding-right: 0px !important; overflow: hidden !important; } ...
Element打开dialog底部页面存在padding-right bug
魏知非的博客
03-28 4452
问题重现：在页面没有打开dialog时，显示是正常的。而在打开dialog后，页面的右侧会出现padding-right：17px； 正常页面： 在打开dialog后，可以看到右侧出现空隙 打开控制台查看代码可以看到打开dialog后，body增加了一个el-popup-parent--hidden样式 解决方法： 将el-popup-parent--hidd...
.el-menu--popup
06-14
`.el-menu--popup` 是 Element UI（简称 EUI）中的一个CSS类名，它与Element UI的菜单组件（`<el-menu>`）有关，该组件通常用于创建下拉式菜单。当`el-menu`的`type`属性设置为`popup`或者它被嵌套在具有`menu-...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值