最近在使用boostrap的select2控件实现多选效果时发现一个问题
正常效果:

但是当选择了两个长一些的option时,发现select2莫名其妙的换了一行空白行:

经过F12调试发现是因为select2多选后有一个搜索功能,因为上一行剩余的控件不足以放下搜索框所以自然而然的换了一行 “空白行”:

知道问题出在哪个地方解决起来就很简单了,下面我提供了两种解决方案:
1.对于不需要搜索的情况下,直接使用CSS隐藏搜索框:

2.对于数据量较大,需要搜索,可以使用JS,在select2失去焦点后隐藏输入框,select2获取焦点后显示输入框,我这里没有搜索需求,就不贴代码出来了有需要的自行尝试。

boostrap的select2自动换行的问题解决的更多相关文章

  1. css实现强制不换行/自动换行/强制换行

    在我们日常的编码中经常会遇到这段文字不可以换行,或者自动换行的需求.虽然这个功能在我们平时很常见但是我相信大家一定不会可以的去记住它吧(至少小月是很懒惰的从来是用什么查什么 ♦ 嘻嘻...).今天我们 ...

  2. CSS - 如何实现强制不换行、自动换行、强制换行 以及 chrom默认焦点 IE下 Input 默认出现叉

    *:focus {outline: none;} input::-ms-clear {display:none;} 一般的文字截断(适用于内联与块): .text-overflow { display ...

  3. css样式自动换行/强制换行

    写样式时遇到的英文字符超出容器问题,度娘后了解下列知识,与大家分享,同时以便自己日后回顾. 一.自动换行问题 正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大. 下面介绍的是CSS如何 ...

  4. css是如何实现在页面文字不换行、自动换行、强制换行的

    强制不换行 div{ white-space:nowrap; } 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行 div ...

  5. 解决boostrap中,iframe渲染下,苹果手机横向无法显示剩余内容问题

    描述: 问题解决了,采用的手势拖动显示剩余内容,并不是有了横向滚动条 在head标签中加入 <head> <meta charset="utf-8"> &l ...

  6. css实现页面文字不换行、自动换行、强制换行

    强制不换行 div{ white-space:nowrap; } 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行 div ...

  7. 16/8/23_CSS自动换行

    转载:http://blog.csdn.net/ye987987/article/details/8011875   自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺 ...

  8. mysql 7下载安装及问题解决

    mysql 7安装及问题解决 一.mysql下载 下载地址:https://www.mysql.com/downloads/ Community (GPL) Downloads MySQL Commu ...

  9. 利用Select2优化@Html.ListBoxFor显示,学会用MultiSelectList

    最近需要用到多选框,Asp.Net MVC自带的@Html.ListBox或@Html.ListBoxFor的显示效果太差,于是找到了Select2进行优化,并正式了解了多选框的操作方法. 首先介绍多 ...

随机推荐

  1. python 小兵 三元运算符

    1 if 条件成立: 2 val = 1 3 else: 4 val = 2 改成三元运算: val = 1 if 条件成立 else 2 举例 条件成立走左边,条件成立走右边 a = 2 b = 5 ...

  2. Linux 常见文件管理命令

    Linux文件系统 根目录:/ 从根目录开始,下面有一堆小目录 root:根用户的目录 bin:可执行文件命令 etc:配置文件 var:日志 lib:安装包或头文件,库文件 home:所有用户的家目 ...

  3. AndroidStudio项目提交到github最详细步骤【转】

    感谢大佬:https://www.cnblogs.com/imqsl/p/6763133.html 在使用studio开发的项目过程中有时候我们想将项目发布到github上,以前都是用一种比较麻烦的方 ...

  4. html重点标签总结

    一. iframe 的学习 iframe通俗的的理解就是,可以在页面里面嵌套新的页面 它的使用会使页面变卡,一般会有一个固定的尺寸,默认的.他也属于可替换元素行列.我们可以通过CSS来改变尺寸 fra ...

  5. 无法加载 mcrypt (外链,英语) 扩展,请检查您的 PHP 配置。

    转载请注明来源:https://www.cnblogs.com/hookjc/ 需要安装libcrytp,在下面的地址下载libmarypt: ftp://mcrypt.hellug.gr/pub/c ...

  6. 学习jsp篇:jsp简单实例之二登录

    编程环境:IDEA,Tomcat,JavaEE 一.实例二登录 1.在自己建的工程下的web目录下建一个文件夹为login,在login中编写登录代码(其实就是和实例一同一个项目) 2.先建登录页面j ...

  7. sublime中的emmet插件的使用技巧

    1.我要生成一个2行3列,宽300px,高500px的表. table[width=300 height=500]>(tr>td{$}*3)*2

  8. sql注入,xss攻击,csrf(模拟请求),防盗链

    如何防止别人模拟请求? 使用令牌token解决模拟请求  好处是 唯一性只能有一次请求 已经拿到生成的token  如何防止呢?  怎样防止非人工? 使用验证码 xss攻击? xss攻击也叫脚本注入 ...

  9. PyTorch深度学习入门笔记(一)PyTorch环境配置及安装

    @ 目录 一.工具安装 1.1 Anaconda 安装 1.2 Pytorch安装 二.编辑器安装 2.1 Pycharm安装 2.2 Jupyter安装 OS: ubuntu 20.04(虚拟机) ...

  10. 对已有的docker容器增加新的端口映射

    一般在运行容器时,我们都会通过参数 -p(使用大写的-P参数则会随机选择宿主机的一个端口进行映射)来指定宿主机和容器端口的映射,例如 docker run -it -d --name [contain ...