最近在使用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. Redis命令大全(超详细)

    一:序 其实本文的命令大家都可以去官网学习,但是我出这篇文章只是以更直观的方式来解读官网上的命令,让大家一眼可以看得懂,看的明白: 注意:我全文使用的Redis版本为 6.2.x 版本,低版本可能有些 ...

  2. Arduino+ESP32 之 驱动GC9A01圆形LCD(二),移植LVGL,跑示例程序,显示自制图片

    在前文Arduino+ESP32 之 驱动GC9A01圆形LCD(一), 我们已经移植好了arduino GFX库, 该库的示例程序内,还有LVGL的示例程序哦. arduino环境下移植lvgl是很 ...

  3. netty系列之:选byte还是选message?这是一个问题

    目录 简介 类型的定义 搭建UDT stream服务器 搭建UDT message服务器 Stream和Message的handler 总结 简介 UDT给了你两种选择,byte stream或者me ...

  4. php截取字符串,避免乱码

    转载请注明来源:https://www.cnblogs.com/hookjc/ 1. 截取GB2312中文字符串 <?php//截取中文字符串 function mysubstr($str, $ ...

  5. laravel中closure和curry 科里化函数式编程

    推荐值得的一看博客文档:谢谢作者  : https://my.oschina.net/zhmsong 函数式编程curry的概念: 只传递给函数一部分参数来调用函数,然后返回一个函数去处理剩下的参数. ...

  6. IOS开发之----常用函数和常数--秀清

    介绍一下Objective-c常用的函数,常数变量 算术函数 [算术函数] 函数名 说明 int rand() 随机数生成.(例)srand(time(nil)); //随机数初期化int val = ...

  7. java_JDBC,连接数据库方式,RestSet结果集,Statement,PreparedStatement,事务,批处理,数据库连接池(c3p0和Druid)、Apache-DBUtils、

    一.JDBC的概述 1.JDBC为访问不同的数据薛是供了统一的接口,为使用者屏蔽了细节问题.2. Java程序员使用JDBC,可以连接任何提供了JDBC驱动程序的数据库系统,从而完成对数据库的各种操作 ...

  8. linux_5

    1 简述osi七层模型和TCP/IP五层模型 2 总结描述TCP三次握手四次挥手 TCP是一种可靠的,面向连接的全双工传输层协议. TCP连接的建立是一个三次握手的过程.如图所示: 第一次握手:主机A ...

  9. nodejs串行有关联

    var async = require('async'); //串行无关联series//串行有关联waterfallasync.waterfall([ function(cb) { setTimeo ...

  10. Python解释器安装、多版本共存以及手动添加环境变量教程

    Python解释器安装.多版本共存以及手动添加环境变量教程 一.Python解释器下载 1. 先进入官网(python.org) 下图为网站的主页,依次按顺序点击"①Download&quo ...