Css ошибка отображения встроенной таблицы - PullRequest
Новая
       12

Css ошибка отображения встроенной таблицы

0 голосов
/ 12 июня 2018

Я пытаюсь использовать селектор начальной загрузки библиотеки, но у меня проблема с входной группой класса, которая содержит "display inline-table".выбранные слова выходят из поля ввода.Я хочу сохранить этот класс без изменения "display inline-table"

Я попытался показать некоторые начальные или блокированные значения для дочерних элементов, но это не работает.

Без класса "группа ввода"

Without input-group class

С классом "группа ввода", но поле увеличивается

With input-group class

Спасибо за помощь. 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
<div class="container">
  <div class="col-sm-12 col-md-2">
    <div class="panel" id="liste_diffusion">
      <label> test </label>
      <div class="input-group">
        <select class="selectpicker" data-style="btn-primary" multiple>
          <option>PHP PHP PHP PHP PHP PHP PHP PHP</option>
          <option>CSS CSS CSS CSS CSS CSS CSS CSS CSS </option>
          <option>HTML HTML HTML HTML HTML HTML </option>
        </select>
      </div>
    </div>
  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 12 июня 2018

Я добавляю информацию для решения проблемы:

что происходит с максимальной шириной 70%: 

.bootstrap-select{
      max-width: 70%;
    }

Без выбранных элементов:

max width 70%

С выбранными элементами поле продолжает расти:

max width 70%

Я не могу использовать px для адаптивного размера.

0 голосов
/ 12 июня 2018

Используйте этот стиль 

.panel .input-group {
  display: flex;
}
.bootstrap-select {
   flex: 1;
}


.panel .input-group {
  display: flex;
}
.bootstrap-select {
   flex: 1;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>

<div class="container">
  <div class="col-sm-12 col-md-2">
    <div class="panel" id="liste_diffusion">
      <label> test </label>
      <div class="input-group">
        <select class="selectpicker" data-style="btn-primary" multiple>
          <option>PHP PHP PHP PHP PHP PHP PHP PHP</option>
          <option>CSS CSS CSS CSS CSS CSS CSS CSS CSS </option>
          <option>HTML HTML HTML HTML HTML HTML </option>
        </select>
      </div>
    </div>
  </div>
</div>
...