vue+element 项目弹窗打开后头部内容左移的问题

最新推荐文章于 2023-08-28 09:35:15 发布
最新推荐文章于 2023-08-28 09:35:15 发布
阅读量962 收藏
点赞数
文章标签： vue.js elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38344363/article/details/122259218
版权

这个问题比较简单，很多人会陷入一个误区，就是想是不是组件有什么问题或者是不是因为滚动条占位导致的头部内容左移。

其实是layout的头部占位被挤压的问题，只要给layout的头部加上宽度100%，就可以解决这个问题，也可以直接加上绝对定位让头部不占用空间来解决，这样也可以避免被挤压。

 这是弹窗打开后的头部占位，明显被挤压了，正常应该是占总宽度的100%，具体为什么会被挤压我也不太清楚，希望有大神可以解释

废铁选手
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue+element实现大文件上传
07-04
vue+element实现大文件上传
基于vue + element UI 的后台管理系统模板
09-12
基于vue + element UI，实现登录页，系统主框架，动态路由的后台管理系统模板
bootstrap弹窗导致内容区左移
weixin_30675967的博客
06-09 94
用bootstrap在多次弹窗后导致了内容区左移动了，如下： 最后只要加上如下代码，就可以了 body{ padding-right: 0!important; } 同时，在默认的弹窗是右边的滑轮是不能滑动的 .modal-open { overflow: initial; } 便可以了.modal-open是在弹窗时加在body上的...
解决element弹窗打开时页面往左抖动
tt1234561009的博客
05-23 640
相信很多人在使用element的弹窗组件el-dialog时都遇到过窗口往左偏移的问题，出现这个问题可能是因为页面出现了滚动条，在窗口打开后body标签上增加了padding-right: 17px;所以，我们可以在代码中强制修改body的样式，如下。
导航fixed定位，弹框出现后导航位置偏移（Vue+element ）
波客
06-02 587
因为导航是浏览器定位，页面有滚动条，所以宽度即使为100%也不是屏幕宽度。 当Element的弹框出现后，滚动条锁死，导航所在的页面滚动条消失，导航的宽度增加，所以会出现偏移的现象。 解决方法 ...
vue中 解决弹窗出现之后背景滚动（移动端 ）
zpcqdkf的博客
03-19 1960
watch: { show(v) { this.toggleContainerTouchAction(v) if (v) { document.body.addEventListener('touchmove', this.stopTouch, { passive: false, capture: true }) } else { ...
vue 局部监听下拉框滚动(@scroll=)
weixin_47382414的博客
05-17 803
需求：页面局部box列表滚动，数据初始显示十条，触底后显示下个十条。 由于后台返回了全部数据，所以数据就需要自己处理了； 给父盒子添加@scroll=“scrollEvent” 可获得父盒子的可视高度和滚动条高度(盒子本身要有高度才会被触发) 父盒子固定高度用于滚动条及触发，关系对比中，文档高度要获取子盒子的 <div class="user-right-card" ref="card" @scroll="scrollEvent"> <div ref="cardChild">&l
vue+element项目中过滤输入框特殊字符小结
10-16
主要介绍了vue+element项目中过滤输入框特殊字符小结，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue+echarts+element ui+django 前后端分离考勤系统源码.zip
05-08
vue+echarts+element ui+django 前后端分离考勤系统源码 vue+echarts+element ui+django 前后端分离考勤系统源码 vue+echarts+element ui+django 前后端分离考勤系统源码 vue+echarts+...
vue+element+admin后台管理项目模板
03-14
添加了动态路由 安装依赖 npm install 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 ...可以通过如下操作解决 npm 下载速度慢的问题 npm install --registry=https://registry.npm.taobao.org 启动服务 npm run dev
左右移动数据vue+elementui
weixin_48289449的博客
09-05 2131
功能：将两个表格中的数据进行移动，针对内容较多的表格+上下移动的功能。
vue+elemen ui实现左侧导航栏，右侧内容变化
GUANYX的博客
09-27 9693
一、首先编写导航栏组件 我的页面是大项目中的一部分，项目之前已经安装了路由等。 首先在component中添加guide.vue文件。 选择element的一个组件，示例代码如下 <template> <el-container style="height: 500px; border: 1px solid #eee"> <el-aside width="20...
头部进度条随滚动轴变化而变化
最新发布
ZXH0122的博客
08-28 78
【代码】头部进度条随滚动轴变化而变化。
vue element-ui Notification 挤在一起，重叠问题 解决办法
weixin_44493841的博客
04-13 1704
代码 <script> this.$notify.error({ title: "连接失败", message: "终端 " + ip_list[i].ip_address + " 连接异常", duration: 30000, offset: 100 }); </script> 改为 </script> await this.$not
elementui 踩坑（一） 解决时间选择器位置变动问题
weixin_44504742的博客
10-24 8575
问题描述先放图，如下 当表单元素内容过长时，就会产生日期时间组件弹框挤到上面去，但开始的时间又是在下面显示的，就会产生不美观的效应，于是，为了更加优化，解决时间日期组件位置固定的问题，可采取如图方法： 尽量将包含日期时间的组件放到表单的最前面，这样就可以避免因表单过长出现弹框挤压的问题。 ...
vue 页面首次加载缓慢原因及解决方案，打包代码压缩Gzip，图片压缩
ingenuou_的博客
11-15 1783
vue 页面首次加载缓慢原因及解决方案，打包代码压缩Gzip，图片压缩
Ant Design vue中select下拉框组件偏移问题
first_shun的博客
09-12 4259
当使用antdesign vue中的select出现下拉框位置偏移的时候
Vue下拉框过宽溢出解决
前端小东
03-08 1081
记录一下，我们在使用element的下拉组件的时候，如果内容过长，会导致溢出非常的不美观，那么有没有什么解决 办法了。切记要加:popper-append-to-body="false"这个属性,不然没法生效哦。经过不断的寻找，终于找到了以下解决办法。最后来个效果图，大功告成。
vue中修改element的下拉输入框select框样式，调整下拉框三角下标
laianko的博客
04-26 3581
这是“素颜” 化妆后 一、拆分写样式 从element组件拷贝button组件、下拉框组件、输入框组件，再分别改造； 二、样式 拷贝下来后，我们最终实现是有组件间的重叠关系，并再同一行 **1、要先调整组件间的位置，要把以上三个组件分别用div包裹再调整宽度（这个很重要，不然是不可能在同一行的），然后再通过display：inline-block让他们在同一行展示。 ***2、***用position：relative 设置位置；这时子块是相对于他原本的位置定位，无论是否进行移动，其所占的位置仍然留有空
vue+element 设置弹窗_vue+element table的弹窗组件
05-17
您可以使用 Element UI 中的 Dialog 组件来创建弹窗，再在弹窗中添加 Table 组件。 以下是一个示例代码： ```html 打开弹窗 姓名"> 年龄"> export default { data() { return { ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值