Floating Label - Multi Select Box

zs6jce commented 2 years ago

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/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <!-- Select2 --> 
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <!-- select2-bootstrap-5-theme -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.2.0/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/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <!-- Select2 -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        $('#multiSelect').select2({
        theme: "bootstrap-5",
        placeholder: "I AM DA PLACEHOLDER"
        });
    </script>
</body>
</html>

apalfrey commented 2 years ago

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

GHPS commented 1 year ago

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.

1) Lower items with .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {padding-top: 0.9em; } 2) 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.

apalfrey / select2-bootstrap-5-theme

Floating Label - Multi Select Box #62