bootstrap-select下拉列表被遮挡

作者: A一土彳曰于丶金金金 | 来源:发表于2023-10-19 00:16 被阅读0次

bootstrap-select-1.12.4使用笔记
类似select下拉框,鼠标点击元素以外隐藏下拉框(阻止冒泡事件
解决blur与click冲突
combotree(树形下拉框)
浏览器控制台模拟选择下拉列表项
01.22 下拉列表和多行文本域
认识HTML---------表单标签非input标签
easyui常用方法
7、bootstrap-select下拉搜索框
界面css 调整

最近写了个小项目，在表格里用bootstrap-select下拉选择框，因为表格用的响应式，导致下拉菜单被遮挡住不显示，在网上找了或多个办法，发现主要在select元素加这一句代码就能解决，发到简书来记录一下，防止被忘记

data-container="body"

完整代码

<select class="selectpicker" data-container="body" data-title="请选择验证方式">
    <option value="1">单行文字</option>
    <option value="2">多行文字</option>
    <option value="3">手机号码</option>
    <option value="4">收货地址</option>
    <option value="5">数字类型</option>
    <option value="6">邮箱类型</option>
    <option value="7">QQ号码</option>
</select>

下拉菜单被遮挡.png

加了代码后的效果

bootstrap-select-1.12.4使用笔记
介绍：bootstrap-select是一款bootstrap下拉单选/多选的插件，功能十分丰富。 GETTING...
类似select下拉框,鼠标点击元素以外隐藏下拉框(阻止冒泡事件
实现效果: 1.点击按钮展开下拉列表2.点击下拉列表中的选项进行选择3.点击除下拉列表外的body，收起下拉列表 ...
解决blur与click冲突
背景在开发下拉选择（picker）组件中遇到，点击输入框出现下拉列表，再点击下拉列表选项后下拉列表自动收缩，然而...
combotree(树形下拉框)
含义树形下拉框结合选择控件和下拉树控件。它与combobox(下拉列表框)类似，但是将下拉列表框的列表替换成了树...
浏览器控制台模拟选择下拉列表项
浏览器控制台使用 jQuery 模拟点击选择下拉列表项下拉列表选项联动到另一个下拉列表项
01.22 下拉列表和多行文本域
下拉列表(菜单) select标签 - 代表整个下拉列表 option标签 - 代表列表中的每个选项，select...
认识HTML---------表单标签非input标签
表单标签非input标签 1.select标签作用：用于定义下拉列表格式：列表数据案例一：下拉列表----...
easyui常用方法
1、下拉框“商品列表”实现 2、下拉框“客户列表”实现 3、下拉框“系统用户”实现 4、下拉框“物流公司”实现
7、bootstrap-select下拉搜索框
bootstrap里好用的插件还真不少，bootstrap-select是一个新发现，项目中的普通下拉框数量已经达...
界面css 调整
子div使用了float浮动之后,如何撑开父元素,让父元素div自动适应高度下拉菜单被遮挡下拉菜单被遮挡