select2多选插件换行后高度变化问题解决

最新推荐文章于 2024-06-04 09:48:28 发布
最新推荐文章于 2024-06-04 09:48:28 发布
阅读量5.3k 收藏 2
点赞数 3
分类专栏： 前端开发 文章标签： select2 select2换行问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LDY1016/article/details/84972521
版权

最近在使用select2插件的时候，发现选择多个选项后会导致组件自适应高度而发生变形，看起来非常丑，如图：

在select2.css文件中添加如下代码，问题完美解决！

/**
 * 自定义样式 
 * 1去掉左边圆角 
 * 2固定高度，添加垂直方向滚动条，防止选择多个选项后组件变形 
 */
.select2-choices {
    border-radius: 0 3px 3px 0 !important;
    max-height: 26px;
    overflow-y: auto !important;
}

运行效果如下图

咚咚阳
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
Layui下拉框设置 高度
qq_42159526的博客
03-25 1万+
Layui怎么调节下拉框的高度layui框架下拉框显示 layui框架下拉框显示 很多人都会用到layui框架，根据项目的需要有时候需要调节select 的高度，但是试了很多方法都不行，我也试了很久，都准备放弃了，突然抱着试试的态度去在开发者工具里边调，最后发现了该怎么样去写样式，下面是个例子，大家需要的可以查看。 样式里边一定要把.layui-input 和.layui-select都写上。 &...
laravel框架select2多选插件初始化默认选中项操作示例
10-15
在本文中，我们将深入探讨如何在 Laravel 框架中使用 Select2 多选插件进行初始化，并设置默认选中的选项。Select2 是一个流行的 jQuery 插件，它提供了更高级的选择器功能，如搜索、多选和分页。在 Laravel 项目中...
解决Select2内容超过下拉框宽度，导致高度变化问题
D493829844的博客
05-13 2298
折腾了好几个小时终于解决了这个问题，做个笔记记录下： 主要时参考了这个文章：https://blog.csdn.net/LDY1016/article/details/84972521 但按照文章说明在select2.css添加了样式后还是不行，于是按F12，查看样式后发现是：select2-selection__rendered，而不是.select2-choices，红框处，不是说原文章不对哈 然后在select2.css添加样式即可： 显示效果如下： ...
layui扩展神器：下拉多选Select增强版
最新发布
gitblog_00001的博客
06-04 359
layui扩展神器：下拉多选Select增强版 项目地址:https://gitcode.com/yelog/layui-select-multiple 在Web开发中，我们常常需要处理选择列表，尤其在数据量较大或者需求复杂时，普通的下拉框往往力不从心。为此，我们有幸发现了一款针对layui框架的优秀扩展组件——layui-select-multiple。这款插件不仅可以提供便捷的多选功能，还支持...
select2 使用详解
热门推荐
专注于大数据方向，区块链，前后端，数据可视化，人工智能等领域
01-26 3万+
构造函数：2.5.2版本：（具体详见http://select2.github.io/select2/#documentation）参数类型描述Width字符串控制宽度样式属性的Select2容器divminimumInputLengthint最小数量的字符maximumInputLengthint最大数量的字符minimumResultsForSearchInt最小数量的结果maximu...
改变html的select高度 select多选
andy_javahome的博客
11-29 691
select的默认高度用css是无法改变的，所以经常有人问。 没办法中的办法是改变它的size属性值。 ps：multiple="true"的意思是默认可以多选。
解决vue下拉框多选框的文字过多超出原本框的高度
VeraHsiang的博客
08-31 3424
当我们使用vue的下拉多选框的时候，通常会出现如下现象 复选的条件多了，el-select__tags被撑开高度，想要解决这个问题，只需要在css中设置 .el-select__tags { flex-wrap: nowrap; overflow: hidden; } 注意：要在style中设置，如果style加上了scoped则不生效。 ...
elementSelect 选择器多选名称过长撑开变高,超出选择框，有多个时并会撑开原始高度优化方式
Alan_Walker1的博客
03-29 5272
elementui 多选下拉选框长度固定的情况下,选择多个长度时会强制撑开高度,怎么让他不换行、不撑开,而是超过的长度显示省略号
SelectBox下拉复选框多选插件
06-24
10. **文档与社区支持**：一个好的插件通常会有详尽的API文档和示例，以及活跃的开发者社区，以便用户解决问题和分享使用经验。 综上所述，“SelectBox下拉复选框多选插件”是一个强大的工具，可以极大地提升网站或...
jQuery select下拉框单选和多选插件.zip
07-11
js代码 [removed][removed] [removed] $('.form-control-chosen').chosen({ allow_single_deselect: true, ... $('.form-control-chosen-required').chosen({ ... $('[title="clickable_optgroup"]').addClass('...
xm-select，一款简单多选的select插件
08-03
XM-SELECT就是这样一款专为解决多选问题而设计的插件，它以其简洁的API和丰富的功能，深受开发者喜爱。下面，我们将深入探讨这款插件的核心特性、使用方法以及常见应用场景。 首先，XM-SELECT的设计理念是“简单...
select2一个很强大的下拉提示
11-14
select2，一个很强大的下拉提示.它支持下拉的直接选择，也支持在下拉内容中输入过滤。
el-select多选搜索框会被上下撑开！
greencaiji的博客
07-21 1102
注意前边要加 /deep/
Element-UI el-select 多选菜单换行撑开
金乌的博客
09-22 1444
Element-UI el-select 多选菜单换行撑开显示破坏整体样式。若出现滚动条样式不好看，可以更改样式，和elementui保持一致。
【element】el-select多选撑开原输入框高度并换行
Weiqian_的博客
04-12 5134
解决el-select多选撑开原输入框高度并换行
el-select使用了多选时，选中多个会撑开原始高度，样式错乱，使用tag展示，一行显示全部内容，超过显示长度并以...显示的方法
qq_42780155的博客
06-03 2万+
使用el-select的多选下拉选择时，如果默认的选择会撑开input，显示所选的全部内容； 这样子很难看，样式还不整齐。 文档中有tag的形式展现，设置collapse-tags属性将它们合并为一段文字： 就不会出现上述的情况了。 但是当多选的内容多长的时候，后面还是会撑开换行，照样使样式不整齐： 看了上面的element元素发现： 这时候需要加内容一行显示，内容超出隐藏，溢出时显示省略标记…的写法了！ css基本功大显身手的时候到啦！（记不起来或者不会的小伙伴记得百度哈…） word-break
element-ui 修改级多选联选择器或多选下拉输入框的高度，并不影响多选后内容撑起高度。
lxzcaicai的博客
03-31 3440
大家在做项目的时候
layui select高度
xcLeigh
04-16 1433
复选高度 .layui-select,.layui-input{ height:35px; } 下拉框高度 .layui-form-select dl { max-height: 220px; }
select2 多选下拉框的使用
程先生的博客
02-28 349
　　项目当中用了很多次了，因为疫情的原因，也没有总结过，趁着加班，总结一下，方便自己查找使用。 　　使用起来很简单，首先就是需要引入css和js就行了(select2是基于jQuery，所以需要提前引入)；请看下面的基本接口 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta char...
el-select多选不换行
07-27
回答: 要实现el-select多选不换行的效果，你可以在el-select标签中加上class="selects"，然后在style中添加以下样式代码： ```css .selects .el-select__tags { display: flex; flex-wrap: nowrap; } .selects .el-select__tags-text { max-width: 80px; display: inline-block; overflow: hidden; vertical-align: bottom; text-overflow: ellipsis; } ``` 这样设置之后，多选的选项将会在同一行显示，并且超出最大宽度的选项会显示省略号。\[1\]\[3\]如果你想使用官方提供的代码，可以直接使用以下代码： ```html <el-select v-model="value2" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择" class="selects"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> ``` 这样也可以实现多选不换行的效果。\[2\] #### 引用[.reference_title] - *1* *2* [【element】el-select多选撑开原输入框高度并换行](https://blog.csdn.net/Weiqian_/article/details/130107339)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [el-select 多选 添加collapse-tags之后换行问题](https://blog.csdn.net/weixin_53558474/article/details/126577918)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值