html中下拉框select横向或纵向被遮挡的问题

最新推荐文章于 2023-11-16 10:08:48 发布
最新推荐文章于 2023-11-16 10:08:48 发布
阅读量2.6k 收藏 2
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tangyuanpp/article/details/102369399
版权

在项目中遇到了select读取的后台传的值，结果数据过多，比如说有几百条,会被外层的给遮挡，没有点击下拉前像这样
在这里插入图片描述
点击下拉后这样
在这里插入图片描述
显示不全这样的问题，在浏览器中调试发现外层的div设置了超出部分隐藏，改成显示即可，即加上 overflow: visible;
改好后变成这样
在这里插入图片描述

2.遇到这个问题后上百度找解决方法，发现还有一种遮挡，就是内容过长横向显示不全的问题
有一种最简单的解决方法，在option中加title这个属性，显示就会这样

在这里插入图片描述

汤圆鸽
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
下拉框数据被遮挡 且 后续数据无法下拉的 解决方法
码农研究僧的博客
06-11 584
调整下拉框高度： 首先，检查下拉框的高度，确保它能够容纳所有的选项 下拉框的高度不够，可能会导致后面的数据无法滚动到可视区域 检查父级容器样式： 确保设备号下拉框及其后面的数据都位于一个可以滚动的容器中 可能父级容器的样式或者布局导致了滚动行为的异常
HTML中select下拉框内容显示不全部分被覆盖的解决方法
01-19
今天，我遇到这样一个问题：查询栏中的下拉框中的内容过长，导致部分被覆盖了。 查询了一些资料，有的说用函数控制，有的说用事件控制，有的看不懂，有的实现起来太复杂了。后来，问了一下同事，有没有一些简单的...
Select下拉框被overflow遮挡的问题
Lou_Lan的博客
05-13 9023
问题概述   如果你没有使用插件，没有使用别人给的组件，这个问题一般是不会出现的。但是如果你使用了别人的组件，那么你就会遇到这个问题。我这里说说我遇到的这个问题的地方，总共是2个地方。 是我在使用iview的，使用select，由于父级框position: relative，并且overflow:auto，所以select下拉框的时候就被挡在父级下面（虽然滚动可以看到，但是觉得很不舒服） 是我在使用vue-treeselect的时候，这个哥们也是和上面一样，被挡在了下面。（这个不演示了，道理一样） 上述
vue中el-select下拉框被遮挡问题
热门推荐
weixin_44768794的博客
12-02 1万+
记录一下最近给我最大困扰的一个问题： element-ui自身有个特点在于 z-index层级是一直变动的，如果不加入其他的样式，比如说自定义UI 或引入其他UI，使用起来是没有问题的，问题在于自定义UI设置了z-index值，就出现了很多很多问题： 1.点击按钮无效，实际是因为弹窗被dialog层遮挡 2.this.¥message、 this.¥confirm被遮挡 (美元符不显示，只能用¥代替一下) 3.也就是今天这个问题，下拉框被遮挡 PS：我是个实习生，全局的东西我不能去动，只能对指定症状下药
PC端网页特效：偏移量offset、可视client、滚动scroll、动画效果及其案例
weixin_49555741的博客
05-28 487
1. 元素偏移量 1.1 offset 概述 offset 翻译就是偏移量，使用这个系列相关属性可以动态得到该元素的位置（偏移）、大小 获取元素距离带有定位父元素的位置 获得元素自身的大小（宽度高度） 注意：返回的数不带单位 offset 常用属性 ： .offsetWidth=padding+border+width（.offsetHeiht同） .offsetTop/.offsetLeft：如果父级没有定位，以body为准 .offsetParent 与.parentNode 的区别：
el-select的下拉框内容超过了下拉框的宽度要隐藏内容
weixin_45646663的博客
12-17 2246
screen为el-select的父级 .screen { /deep/ .el-select__tags { &>span { width: 100%; display: flex; /deep/ .el-tag.el-tag--info.el-tag--small.el-tag--light { &:first-child { max-width: 100%;
关于formSelects-v4选中的文字过长导致的溢出被遮挡问题解决方法
weixin_44111176的博客
09-05 1100
layui拓展组件formSelects相关的坑 value.name是选中时被填入的内容,只需根据需求稍微修改一下源码 精华所在: Common.prototype.addLabel = function (id, div, val) { if (!val) return; var tips = 'fsw="' + NAME + '"'; var subStr if (val....
uniapp下拉框显示不全
最新发布
qq_46615386的博客
11-16 913
uni-data-select组件下拉内容显示不全
浅谈Vue Element中Select下拉框选取值的问题
08-27
Vue Element 中 Select 下拉框选取值的问题 在 Vue Element 中，Select 下拉框是非常常用的一个组件，它可以让用户快速地选择某个选项。但是，在实际开发中，我们经常会遇到一些问题，例如如何获取选中后的值、如何...
改变HTML下拉框SELECT选项的多种方法
12-12
提交表单后返回的HTML页面重新渲染，SELECT控件的value和selectedIndex属性都无法使下拉框保留提交表单前的状态。 复制代码代码如下: <SELECT id=”idState” style=”width:150″ name=”state” selectedIndex...
(css)解决弹窗下的下拉选择框被遮挡或显示不全问题
nyf_unknow的博客
07-26 4247
(css)解决弹窗下的下拉选择框被遮挡或显示不全问题
div总是被select遮挡的解决方法
10-30
个方法好像可行，但前提是div层的大小、位置可知，对于在后台js文件中控制style的div就实效了。 我遇到的恰好就是这种情况，所以太遗憾了。 不过这个帖子还是应该收藏一下。
select 向上弹起
weixin_30776273的博客
08-30 1978
<!--向上弹起的弹框--> <div class="btn-group dropup"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span clas...
解决div层被select下拉框遮盖的问题
URL的专栏
04-27 7245
在IE里，层DIV被下拉框SELECT遮盖，这是IE的bug之一，原因在于select的优先级别比div高。因此无论如何用css属性z-index设置都没用。所以，解决的办法有两种在显示div的时候隐藏所有select让div里的内容比select的优先级还要高第一种方法显然比较麻烦，特别是当select比较多且位置不固定的时候，很容易将不该隐藏的也隐藏了。第二钟办法更好一些。常用的优先级比sel
layui的select下拉框太长被遮挡了的解决办法
weixin_40045983的博客
04-22 9086
layui的select下拉框太长采用滚动条的形式出现，可以给select的dl加一个最大高度，具体的效果如下图 .layui-form-select dl { max-height:160px; } 如果layui 的下拉框的内容过多样式会很难看，可以采用给select一个固定高度，超出部分滚动条滚动显示 只需要加一条css即可 <style> .lay...
＜uni-data-select＞无边框设置
Djdjsjnsjx的博客
09-15 3921
无边框设置
uni 下拉框的实现
c_qianxia5040的博客
01-27 1589
效果图： 完整代码 <template> <view class="checkout"> <view class="select_box"> <picker @change="handleChange" :range="exitData"> <label class="">{{ currExit }}</label> </picker> </view> </view>
layui表格中加下拉框解决数据被遮挡问题
06-13
如果在Layui表格中加入下拉框，可能会出现数据被下拉框遮挡的问题。要解决这个问题，可以...如果表格中的数据太多，可以考虑使用分页等方式来减少数据量，以避免遮挡问题的发生。 希望以上方法能够帮助到你解决问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值