boostrap的select2自动换行的问题解决
最近在使用boostrap的select2控件实现多选效果时发现一个问题
正常效果:
但是当选择了两个长一些的option时,发现select2莫名其妙的换了一行空白行:
经过F12调试发现是因为select2多选后有一个搜索功能,因为上一行剩余的控件不足以放下搜索框所以自然而然的换了一行 “空白行”:
知道问题出在哪个地方解决起来就很简单了,下面我提供了两种解决方案:
1.对于不需要搜索的情况下,直接使用CSS隐藏搜索框:
2.对于数据量较大,需要搜索,可以使用JS,在select2失去焦点后隐藏输入框,select2获取焦点后显示输入框,我这里没有搜索需求,就不贴代码出来了有需要的自行尝试。
boostrap的select2自动换行的问题解决的更多相关文章
- css实现强制不换行/自动换行/强制换行
在我们日常的编码中经常会遇到这段文字不可以换行,或者自动换行的需求.虽然这个功能在我们平时很常见但是我相信大家一定不会可以的去记住它吧(至少小月是很懒惰的从来是用什么查什么 ♦ 嘻嘻...).今天我们 ...
- CSS - 如何实现强制不换行、自动换行、强制换行 以及 chrom默认焦点 IE下 Input 默认出现叉
*:focus {outline: none;} input::-ms-clear {display:none;} 一般的文字截断(适用于内联与块): .text-overflow { display ...
- css样式自动换行/强制换行
写样式时遇到的英文字符超出容器问题,度娘后了解下列知识,与大家分享,同时以便自己日后回顾. 一.自动换行问题 正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大. 下面介绍的是CSS如何 ...
- css是如何实现在页面文字不换行、自动换行、强制换行的
强制不换行 div{ white-space:nowrap; } 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行 div ...
- 解决boostrap中,iframe渲染下,苹果手机横向无法显示剩余内容问题
描述: 问题解决了,采用的手势拖动显示剩余内容,并不是有了横向滚动条 在head标签中加入 <head> <meta charset="utf-8"> &l ...
- css实现页面文字不换行、自动换行、强制换行
强制不换行 div{ white-space:nowrap; } 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行 div ...
- 16/8/23_CSS自动换行
转载:http://blog.csdn.net/ye987987/article/details/8011875 自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺 ...
- mysql 7下载安装及问题解决
mysql 7安装及问题解决 一.mysql下载 下载地址:https://www.mysql.com/downloads/ Community (GPL) Downloads MySQL Commu ...
- 利用Select2优化@Html.ListBoxFor显示,学会用MultiSelectList
最近需要用到多选框,Asp.Net MVC自带的@Html.ListBox或@Html.ListBoxFor的显示效果太差,于是找到了Select2进行优化,并正式了解了多选框的操作方法. 首先介绍多 ...
随机推荐
- hexo博客如何插入图片
Hexo是一个静态的博客网站生成器,生成一个博客只需要分分钟的时间就能搞定. Hexo的博文是支持Markdown格式的,发表一篇文章只需要简简单单的几个命令. hexo new '文章'就会生成一个 ...
- UVA1619 感觉不错 Feel Good(良好的感觉) 题解
0.题面: 给出正整数n和一个(1 <= n <= 100 000)长度的数列,要求找出一个子区间,使这个子区间的数字和乘上子区间中的最小值最大.输出这个最大值与区间的两个端点. 1.思路 ...
- NOIP PJ/CSP-J 题目选做
1. luoguP7074 [CSP-J2020] 方格取数 2. luoguP5662 [CSP-J2019] 纪念品 3. luoguP2671 [NOIP2015 普及组] 求和 4. luog ...
- C++ 子函数参数传递过程
编译环境:Visual Studio 2015 参数传递与汇编语言有很大关系.子函数传递参数主要方式有三种(这三种参数传递方式都可用用于x86汇编语言甚至其它汇编语言): 寄存器方式传递参数 存储器方 ...
- NumPy 秘籍中文第二版·翻译完成
原文:NumPy Cookbook - Second Edition 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远. 在线阅读 Apache ...
- Git简单多人协作
感谢廖雪峰老师,引自他的Git教程. Git简单多人协作 首先,可以试图用git push origin <branch-name>推送自己的修改: 如果推送失败,则因为远程分支比你的本地 ...
- V8 内存管理和垃圾回收机制总结
这篇文章主要介绍 V8 的内存管理和垃圾回收知识. V8 内存管理及垃圾回收机制浅析 由于 V8 引擎的原因,Node 在操作大内存对象时受到了一些限制,在 64 位的机器上,默认最大操作的对象大小约 ...
- maven项目pom文件下载的包放在哪
右击项目configure bulid path ----->libraries--->maven dependencies 可以看到每个jar的存放路径
- MacOS常用命令行工具
转自:https://blog.csdn.net/u014102846/article/details/77964493 https://ohmyz.sh/ https://github.com/ro ...
- Solution -「ZJOI 2020」「洛谷 P6631」序列
\(\mathcal{Description}\) Link. 给定一个长为 \(n\) 的非负整数序列 \(\lang a_n\rang\),你可以进行如下操作: 取 \([l,r]\),将 ...