最近在使用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 修改AD密码

    前提条件: AD 已开启证书服务(最重要的一句话). import ldap3 SERVER = 'adserver' BASEDN = "DC=example,DC=com" U ...

  2. SpringBoot的.gitignore文件使用

    简介 临时文件,编译的中间文件等不要提交到代码仓库,这时就要设置相应的忽略规则,来忽略这些文件的提交.git提供了一个.gitignore,来自动忽略这些配置文件 配置规则 # 表示此为注释,将被Gi ...

  3. Android 使用签名的好处【转】

    感谢大佬:https://zhidao.baidu.com/question/360127490062917572.html 平时我们的程序可以在模拟器上安装并运行,是因为在应用程序开发期间,由于是以 ...

  4. php表单初始化

    转载请注明来源:https://www.cnblogs.com/hookjc/ //初始化表单值的函数function  InitForm($row,$form="form1"){ ...

  5. 使用python实现冒泡排序和快速排序

    1 def bubble(arr): 2 """冒泡排序""" 3 loop = len(arr) - 1 4 if loop > 0 ...

  6. java多线程编程(二)

    1. wait 和 sleep 区别? 1.wait可以指定时间也可以不指定,sleep必须指定时间. 2.在同步中时,对cpu的执行权和锁的处理不同.  wait:释放执行权,释放锁.  sleep ...

  7. 无脑安装——Python 及 安装python集成开发环境pycharm

    无脑安装--Python 及安装python集成开发环境pycharm 1.真机安装python 2.安装python集成开发环境pycharm Python 是一种解释型语言 Python 是面向对 ...

  8. idea运行Tomcat的servlet程序时报500错误解决方法

    今天在测试使用Tomcat运行servlet小程序时,在传递参数时,出现了如上错误. 开始我以为是配置出了问题,就把项目删除了又建立了一遍,结果亦然. 经过仔细排查,发现问题,先说明问题原因:idea ...

  9. traceroute实用命令总结

    在工作中,我们经常会使用到traceroute进行追踪路由,从而判断网络的故障点,或者网络策略限制等原因.对于网络排查traceroute还是有很大用处的. 一.traceroute常用命令参数 用法 ...

  10. code-server服务端开发利器,再也不用vim装逼了!!!

    一直有个需求,就是万不得已在服务修改代码的时候能有个好的工具,至少比vim要强吧!虽然vim也还行,但是如果比vscode那一定是差了点!这个微软洗心革面的新工具着实不错!从刚开始的鄙视到真香我用了不 ...