Размер элемента начальной загрузки Select2 не соответствует ожидаемому

Я пытаюсь установить макет своей страницы с помощью Bootstrap input-group и form-control, один из которых обертывает элемент Select2.

Вот часть моего HTML-кода:

<div class = "col-3">
    <div id='status-input-group' class = "input-group input-group-sm mb-2">
        <div class = "input-group-prepend">
            <label id = "label" class = "input-group-text" for = "status">Status</label>
        </div>
        <div>
            <select id = "status" class = "form-control" aria-label = "Small" aria-describedby = "label"></select>
        </div>
    </div>
    <div id='invoice-input-group' class = "input-group input-group-sm mb-2">
        <div class = "input-group-prepend">
            <label id = "label" class = "input-group-text" for = "invoice-id">Invoice</label>
        </div>
        <input id = "invoice-id" class = "form-control" aria-label = "Small" aria-describedby = "label" disabled />
    </div>
...
</div>

Это выглядит так:

Я ожидал, что правый край элемента select2 будет выровнен с вводом ниже.

Я попытался установить style = "width: 100%;" для div, содержащего select2. Но затем ширина select2 стала такой же, как полная ширина элемента ниже, и перешла к другой строке.

Как заставить элемент select2 заполнять все свободное пространство столбца, но не больше?

Я попытался вручную установить width что-то вроде 77%, но это работает только для определенной ширины окна, поэтому это вообще не решение.

Почему у вас есть обертка div вокруг элемента select? Это, вероятно, нарушает стили Bootstrap.

isherwood 16.12.2020 21:19
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
1
1 022
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Обновление для работы с JQuery select2

Select2 заменяет собственный элемент select элементом, который он генерирует и которым управляет. Когда он генерирует свой элемент, он смотрит на размер родителя, чтобы определить размер самого себя, если вы измените размер родительского элемента, select2 будет иметь размер, который вы ожидаете.

Использование width не даст вам ожидаемых результатов, потому что вы находитесь внутри input-group, который является элементом flex, вы можете увеличить контейнер, используя свойство flex

Поскольку в вашем примере используется Bootstrap4, и для него есть тема bootstrap4, вы можете использовать ее напрямую, либо через CDN, либо при установке, чтобы стиль select2 соответствовал остальным вашим вводам.

$('#status').select2({
  theme: 'bootstrap4'
});

$('#status-s').select2({
  // ...
});

$('#status-w').select2({
  // ...
});
#s2-container-good {
  flex: 1;
}

#s2-container-width {
  width: 100%;
}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin = "anonymous">
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel = "stylesheet" />
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/@ttskch/[email protected]/dist/select2-bootstrap4.min.css" integrity = "sha256-J6L5BfjnEuIwj6+OSc2OBxc8+BEGW3ZTz7wDHepaayI = " crossorigin = "anonymous">

<div class = "col-3">
  <div class = "legend">Using flex: 1</div>
  <div id='status-input-group' class = "input-group input-group-sm mb-2">
    <div class = "input-group-prepend">
      <label id = "label" class = "input-group-text" for = "status">Status</label>
    </div>
    <div id = "s2-container-good">
      <select id = "status" class = "form-control" aria-label = "Small" aria-describedby = "label">
        <option>Done</option>
        <option>Waiting</option>
        <option>Undefined</option>
      </select>
    </div>
  </div>
  <div id='invoice-input-group' class = "input-group input-group-sm mb-2">
    <div class = "input-group-prepend">
      <label id = "label" class = "input-group-text" for = "invoice-id">Invoice</label>
    </div>
    <input id = "invoice-id" class = "form-control" aria-label = "Small" aria-describedby = "label" disabled />
  </div>
  <!-- This select will not use the full width -->
  <div class = "legend">No CSS</div>
  <div id='status-input-group' class = "input-group input-group-sm mb-2">
    <div class = "input-group-prepend">
      <label id = "label" class = "input-group-text" for = "status">Status</label>
    </div>
    <div id = "s2-container-no-css">
      <select id = "status-s" class = "form-control" aria-label = "Small" aria-describedby = "label">
        <option>Done</option>
        <option>Waiting</option>
        <option>Undefined</option>
      </select>
    </div>
  </div>
  <!-- This select will jump to the next line -->
  <div class = "legend">Width: 100%</div>
  <div id='status-input-group' class = "input-group input-group-sm mb-2">
    <div class = "input-group-prepend">
      <label id = "label" class = "input-group-text" for = "status">Status</label>
    </div>
    <div id = "s2-container-width">
      <select id = "status-w" class = "form-control" aria-label = "Small" aria-describedby = "label">
        <option>Done</option>
        <option>Waiting</option>
        <option>Undefined</option>
      </select>
    </div>
  </div>
</div>

Оригинальный ответ ниже

Удалите div обертку выбора, и он будет работать.

<!-- CSS only -->
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin = "anonymous">

<div class = "col-3">
  <div id='status-input-group' class = "input-group input-group-sm mb-2">
    <div class = "input-group-prepend">
      <label id = "label" class = "input-group-text" for = "status">Status</label>
    </div>
    <select id = "status" class = "form-control" aria-label = "Small" aria-describedby = "label">
      <option>Mustard</option>
      <option>Ketchup</option>
      <option>Relish</option>
    </select>
  </div>
  <div id='invoice-input-group' class = "input-group input-group-sm mb-2">
    <div class = "input-group-prepend">
      <label id = "label" class = "input-group-text" for = "invoice-id">Invoice</label>
    </div>
    <input id = "invoice-id" class = "form-control" aria-label = "Small" aria-describedby = "label" disabled />
  </div>
  ...
</div>

Это не так. На самом деле это был оригинальный макет (без div). Я считаю, что это как-то связано с Select2

Ralfeus 16.12.2020 21:42

Вы пробовали фрагмент? @Ralfeus У меня работает в Firefox и Chromium

Raul Sauco 16.12.2020 22:26

Это работает. Однако, если я добавлю $('#status').select2({theme: 'bootstrap', data: ...});, то я получу картинку, как на скриншоте

Ralfeus 16.12.2020 22:34

вот и все! Большое спасибо! Только один вопрос - как справиться с разницей в высоте элементов?

Ralfeus 17.12.2020 10:06

Вы можете использовать эту тему select2-bootstrap4. Вы также можете стилизовать его вручную, но использование темы, помимо того, что это проще, вероятно, в конечном итоге будет работать лучше в долгосрочной перспективе. Я обновил ответ, чтобы использовать его в «правильном» примере.

Raul Sauco 17.12.2020 10:30

Другие вопросы по теме