Я пытаюсь установить макет своей страницы с помощью 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%
, но это работает только для определенной ширины окна, поэтому это вообще не решение.
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 У меня работает в Firefox и Chromium
Это работает. Однако, если я добавлю $('#status').select2({theme: 'bootstrap', data: ...});
, то я получу картинку, как на скриншоте
вот и все! Большое спасибо! Только один вопрос - как справиться с разницей в высоте элементов?
Вы можете использовать эту тему select2-bootstrap4. Вы также можете стилизовать его вручную, но использование темы, помимо того, что это проще, вероятно, в конечном итоге будет работать лучше в долгосрочной перспективе. Я обновил ответ, чтобы использовать его в «правильном» примере.
Почему у вас есть обертка div вокруг элемента select? Это, вероятно, нарушает стили Bootstrap.