Element打开dialog底部页面存在padding-right bug

最新推荐文章于 2025-05-13 18:53:23 发布
最新推荐文章于 2025-05-13 18:53:23 发布
阅读量4.6k 收藏 7
点赞数 3
CC 4.0 BY-SA版权
分类专栏： ElementUI 文章标签： vue css element-ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40302929/article/details/105160966
本文详细描述了在使用Element UI框架中Dialog组件时遇到的一个常见问题：打开Dialog后，页面body元素会自动添加额外的padding-right，导致布局错位。文章提供了具体的解决方案，通过覆盖特定样式来消除此问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题重现：在页面没有打开dialog时，显示是正常的。而在打开dialog后，页面的右侧会出现padding-right：17px；

正常页面：

 

在打开 dialog后，可以看到右侧出现空隙

 打开控制台查看代码可以看到打开dialog后，body增加了一个el-popup-parent--hidden样式




 



解决方法： 将el-popup-parent--hidden类样式的padding-right强制改成0px



    .el-popup-parent--hidden {
      padding-right: 0 !important;
    }



 


                

        

    

    
  



    



                



	

		

			

				
					
VUE+Element-ui中，在添加表单中嵌套了两个组件，每个组件中都有输入款，如何给嵌套组件输入框加必填项规则？

				
			

			

				

					**My Coding Family**
				

				

					07-11
					
					783
					
				

			

		

		

			
				
🏆本文收录于 《全栈Bug调优(实战版)》 专栏，该专栏专注于分享我在真实项目开发中遇到的各类疑难Bug及其深层成因，并系统提供高效、可复现的解决思路和实操方案。无论你是刚入行的新手开发者，还是拥有多年项目经验的资深工程师，本专栏都将为你提供一条系统化、高质量的问题排查与优化路径，助力你加速成长，攻克技术壁垒，迈向技术价值最大化与职业发展的更高峰🚀！

			
		

	



                

            
              



	

		

			

				
					
Spring Boot Vue Element入门实战（八）静态列表页面

				
			

			

				

					岁月不饶人，我亦未曾饶过岁月
				

				

					08-16
					
					9665
					
				

			

		

		

			
				
本博客属作者原创，未经允许禁止转载，请尊重原创！如有问题请联系QQ509961766


页面中间部分主要分为3部分，分别是顶部的搜索，中间的列表，底部的分页，我们先出布局说起

...

			
		

	



              


  
              

                


	

		

			

				
					
Vue中使用ElementUi的弹框会自动添加style=“padding-right: 17px；“ 的解决方法

				
			

			

				

					MMF博客园
				

				

					04-29
					
					299
					
				

			

		

		

			
				
Vue中使用ElementUi的弹框会自动添加style=“padding-right: 17px；“ 的解决方法

			
		

	





	

		

			

				
					
vue 中使用 elementUI 的 MessageBox 弹框时，页面 body 会自动加上内联样式 style=“padding-right: 17px；“ 的解决方法

				
			

			

				

					weixin_61769998的博客
				

				

					08-14
					
					1420
					
				

			

		

		

			
				
vue 中使用 elementUI 的 MessageBox 弹框时，页面 body 会自动加上内联样式 style="padding-right: 17px;" 的解决方法

			
		

	



		

			
		



	

		

			

				
					
二次封装 el-dialog 组件：打造更灵活的对话框解决方案

					
最新发布

				
			

			

				

					专研技术的大学生:会点Java和前端
				

				

					05-13
					
					914
					
				

			

		

		

			
				
在 Vue 项目中，Element UI 的 `el-dialog` 是一个非常实用的对话框组件。但在实际开发中，我们经常会遇到需要重复设置对话框属性、处理相同逻辑的情况。通过二次封装，我们可以创建一个更灵活、更易用的对话框组件，提高开发效率并保持代码一致性。

			
		

	





	

		

			

				
					
Vue+Element UI 开发PC端页面，出现页面抖动原因及解决办法

				
			

			

				

					蓝胖子的博客
				

				

					03-22
					
					983
					
				

			

		

		

			
				
Vue+Element UI 开发PC端页面，出现页面抖动原因及解决办法

			
		

	





	

		

			

				
					
解决Element UI的el-dialog弹窗打开时css的显示BUG

				
			

			

				

					GhostUncledrew-blogs
				

				

					04-08
					
					791
					
				

			

		

		

			
				
*在使用el-dialog弹窗时 body的内联样式默认会有padding-right: 5px

<style lang="less" scoped>
// .el-popup-parent--hiddren
body{
	padding-right: 0 !important;
}	
</style>




			
		

	





	

		

			

				
					
elementui Dialog对话框,显示偏移问题

				
			

			

				

					u010914880的博客
				

				

					11-13
					
					7207
					
				

			

		

		

			
				
#当显示dialog的时候页面会有padding-right:15的偏移这时候可以在页面设置一个样式 body{padding-right:0px!important}覆盖就行了




			
		

	





	

		

			

				
					
el-dialog 中首次点击时，el-input 的 autosize 高度自适应失效

				
			

			

				

					03-31
				

			

		

		

			
				
另外，可能需要检查Element UI的版本，因为某些版本可能存在相关的bug，升级到最新版本可能已经修复了这个问题。如果问题依旧，可能需要结合上述方法进行处理。  最后，测试这个解决方案是否能有效解决用户的问题，...

			
		

	





	

		

			

				
					
dialog弹出的界面显示在父级（不局限于Iframe中）跳出Iframe显示

				
			

			

				

					weixin_45286744的博客
				

				

					12-11
					
					1871
					
				

			

		

		

			
				
注:前端选用的框架是easyUI
昨天遇到一个小bug,在界面中的Iframe里的界面弹出的框只存在于Iframe中，我想让他显示在整个界面里，来操作
首先思想梳理
1.第一步我们要明确想让他在父级中展示就应该吧弹出的框的HTML代码写在父级的前端代码中(默认关闭状态，不显示)
2.第二步在Iframe中的界面JS中调用父级的控件。用parent.定位父级的DIV
3.显示出来后JS的执行代码在也在子级中
父级：
@* 新增 *@
    <div id="applyAdd" class="easyu

			
		

	





	

		

			

				
					
elementui上传结合oss接口断点续传，如何实现停止上传和继续上传？？

				
			

			

				

					**My Coding Family**
				

				

					10-26
					
					965
					
				

			

		

		

			
				
如上问题有的来自我自身项目开发，有的收集网站，有的来自读者…如有侵权，立马删除。再者，针对此专栏中部分问题及其问题的解答思路或步骤等，存在少部分搜集于全网社区及人工智能问答等渠道，若最后实在是没能帮助到你，还望见谅！并非所有的解答都能解决每个人的问题，在此希望屏幕前的你能够给予宝贵的理解，而不是立刻指责或者抱怨！如果你有更优解，那建议你出教程写方案，一同学习！共同进步。ok，以上就是我这期的Bug修复内容啦，如果还想查找更多解决方案，你可以看看我专门收集Bug及提供解决方案的专栏。

			
		

	





	

		

			

				
					
element-ui element-plus dialog - 分析

				
			

			

				

					huxianc的博客
				

				

					12-21
					
					3534
					
				

			

		

		

			
				
源代码地址 - dialog


version:element-plus 1.0.1-beta.0

index.vue
<template>
  <!-- dialog是v-if控制渲染的 -->
  <template v-if="destroyOnClose && !visible"></template>
  <template v-else>
    <!-- vue3 新增组件 teleport  to表示元素.

			
		

	





	

		

			

				
					
修改 el-dialog__body padding

				
			

			

				

					修行小蜗牛的博客
				

				

					08-03
					
					2392
					
				

			

		

		

			
				
在dialog外部套个div，再写deep。

			
		

	





	

		

			

				
					
el-dialog嵌套,修改内层el-dialog样式(自定义样式)

				
			

			

				

					song_song0927的博客
				

				

					08-11
					
					5452
					
				

			

		

		

			
				
el-dialog嵌套el-dialog使用,自定义内层el-dialog样式,修改el-dialog样式

			
		

	





	

		

			

				
					
element-plus中el-dialog使用::v-deep()穿透设置样式不生效踩坑记录

				
			

			

				

					jieyucx的博客
				

				

					05-29
					
					1977
					
				

			

		

		

			
				
如上：我想去掉插槽自带的下边框和上边框，但是不生效。给el-dialog加个类，在不带scope的。

			
		

	





	

		

			

				
					
Vue中使用element-plus中的el-dialog定义弹窗-内部样式修改-v-model实现-demo

				
			

			

				

					JackieDYH的博客
				

				

					08-24
					
					3780
					
				

			

		

		

			
				
el-dialog.no-code-dialog 添加自己定义的类名用于区分其他组件。

			
		

	





	

		

			

				
					
vue 框架el-dialog 内部边距过大，导致空白区域很多，已解决

				
			

			

				

					weixin_44006009的博客
				

				

					03-01
					
					1788
					
				

			

		

		

			
				
vue 框架el-dialog 优化内部边距过大，导致空白区域很多。

			
		

	





	

		

			

				
					
el-dialog使用、样式自定义

					
热门推荐

				
			

			

				

					gugugutime.com
				

				

					11-29
					
					1万+
					
				

			

		

		

			
				
el-dialog提供的样式


			
		

	





	

		

			

				
					
element-UI打开 dialog 抖动

				
			

			

				

					Ton555555的博客
				

				

					07-26
					
					874
					
				

			

		

		

			
				
抖动原因：
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; 
    }


.

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 10

	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值