select2-bootstrap-5-theme
select2-bootstrap-5-theme copied to clipboard
apalfrey
Floating Label - Multi Select Box
Issue Description: The selected options, overlay the floating label (refer screenshot below).
Screen Shot:
Fiddle - Example https://jsfiddle.net/vtycmdow/12/
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>PMS - Additional Contract</title>
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Select2 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<!-- select2-bootstrap-5-theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/select2-bootstrap-5-theme.min.css" />
</head>
<body>
<!-- Options -->
<div class="form-floating m-3">
<select multiple class="form-select" id="multiSelect" th:field="*{brokerCategoryCodes}">
<option value="A">Option - A</option>
<option value="B">Option - B</option>
<option value="C">Option - C</option>
<option value="D">Option - D</option>
</select>
<label for="multiSelect">Options:</label>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Select2 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<script>
$('#multiSelect').select2({
theme: "bootstrap-5",
placeholder: "I AM DA PLACEHOLDER"
});
</script>
</body>
</html>
Floating labels are not currently supported, however there is a request here to have them supported #21, I haven't had much time to work on this recently but I'm hoping to get it sorted out soon
The selected options, overlay the floating label (refer screenshot below).
Currently, before floating labels are officially supported, you have two options - place the selected items a bit lower and/or remove their border.
- Lower items with
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {padding-top: 0.9em; } - Remove the item border with
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice { border: none}
For me personally the combination of both of them looks most pleasant.
