Multiline Bootstrap-Select with height: auto [英] Multiline Bootstrap-Select with height: auto

问题描述

我正在使用

片段:

select[multiple],选择大小] {高度:自动；}选择，文本区域{字体系列:继承；字体大小:继承；行高:继承；}选择 {文本转换:无；}按钮，输入，选择组，选择，文本区域{颜色:继承；字体:继承；边距:0；}* {-webkit-box-sizing: 边框框；-moz-box-sizing: 边框框；box-sizing: 边框框；}.输入组{边框折叠:分开；}.bootstrap-选择 .btn {/* 在选择器上启用多行 */空白:正常！重要；自动换行:断字；}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.min.css"><div class="form-group"><div class="input-group"><select multiple="multiple" title="colors" class="selectpicker" name="article[color][]" id="article_color" style="display: none;"><option data-value="green" data-content="<i class='fa fa-question-circle-o'></i> Green" value="green">green</option><option data-value="深绿色蓝色黄色" data-content="<i class='fa fa-question-circle-o'></i>深绿色蓝色黄色" value="深绿色蓝黄">深绿蓝黄</option><option data-value="stripes red orange" data-content="<i class='fa fa-question-circle-o'></i> Stripes Red Orange" value="stripes red orange">条纹红橙</option></选择>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.min.js"></script>

解决方案

您只需要将 white-space 规则移动到 .filter-option 类，因为这是插件更新所选值的地方.

如果您打开 DevTools 并观看 <span class="filter-option pull-left">，您会看到它更新.

CSS

.bootstrap-select .filter-option { white-space: normal;}

工作示例:

body {填充:20px；}形式 {最大宽度:250px；保证金:自动；}/*使用以下规则*/.bootstrap-选择 .filter-option {空白:正常；}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.min.css"><表格><div class="form-group"><div class="input-group"><select multiple="multiple" title="colors" class="selectpicker" name="article[color][]" id="article_color" style="display: none;"><option data-value="green" data-content="<i class='fa fa-question-circle-o'></i> Green" value="green">green</option><option data-value="深绿色蓝色黄色" data-content="<i class='fa fa-question-circle-o'></i>深绿色蓝色黄色" value="深绿色蓝黄">深绿蓝黄</option><option data-value="stripes red orange" data-content="<i class='fa fa-question-circle-o'></i> Stripes Red Orange" value="stripes red orange">条纹红橙</option></选择>

</表单><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.min.js"></script>

I'm using Bootstrap-Select with Multiple select boxes and

white-space: normal;
height: auto

so it becomes multiline, but height: auto grows up the box with (for my opinion) too much space on the bottom (marked with the red line)

Is there any chance to remove it?

Snippet:

select[multiple],
select[size] {
  height: auto;
}
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
select {
  text-transform: none;
}
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.input-group {
  border-collapse: separate;
}
.bootstrap-select .btn {
  /* enables multiline on selectpicker */
  white-space: normal !important;
  word-wrap: break-word;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.min.css">

<div class="form-group">
  <div class="input-group">
    <select multiple="multiple" title="colors" class="selectpicker" name="article[color][]" id="article_color" style="display: none;">
      <option data-value="green" data-content="<i class='fa fa-question-circle-o'></i> Green" value="green">green</option>
      <option data-value="dark green blue yellow" data-content="<i class='fa fa-question-circle-o'></i> Dark Green Blue Yellow" value="dark green blue yellow">dark green blue yellow</option>
      <option data-value="stripes red orange" data-content="<i class='fa fa-question-circle-o'></i> Stripes Red Orange" value="stripes red orange">stripes red orange</option>
    </select>
  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.min.js"></script>

解决方案

You simply need to move your white-space rule to the .filter-option class because this is where the plugin updates the selected values.

If you open up DevTools and watch <span class="filter-option pull-left">, you'll see it update.

CSS

.bootstrap-select .filter-option { white-space: normal; }

Working Example:

body {
  padding: 20px;
}
form {
  max-width: 250px;
  margin: auto;
}
/*USE THE BELOW RULE */

.bootstrap-select .filter-option {
  white-space: normal;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.min.css">

<form>
  <div class="form-group">
    <div class="input-group">
      <select multiple="multiple" title="colors" class="selectpicker" name="article[color][]" id="article_color" style="display: none;">
        <option data-value="green" data-content="<i class='fa fa-question-circle-o'></i> Green" value="green">green</option>
        <option data-value="dark green blue yellow" data-content="<i class='fa fa-question-circle-o'></i> Dark Green Blue Yellow" value="dark green blue yellow">dark green blue yellow</option>
        <option data-value="stripes red orange" data-content="<i class='fa fa-question-circle-o'></i> Stripes Red Orange" value="stripes red orange">stripes red orange</option>
      </select>
    </div>
  </div>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.min.js"></script>

这篇关于Multiline Bootstrap-Select with height: auto的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！