Поля <option> уходят на задний план

Рейтинг: 1Ответов: 2Опубликовано: 19.07.2023

Всем привет. Я не особо разбираюсь во frontend, пробовал искать решение проблемы, даже у чата GPT спрашивал , но так и не получилось. При клики по select , поля option уходят за карточку, я так понимаю что дело в фокусировке, но как решить не знаю. Спасибо кто помжет.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#direction').select2();
        });
    </script>
</head>
<body>
<div class="modal fade"  id="showPanel" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content" style="width: 1000px">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="staticBackdropLabelPayment">Пользователи</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form class="row g-3">
                    <div class="col-12" >
                        <label for="direction" class="form-label">Поиск</label>
                        <select class="form-select" id="direction" name="state" tabindex="-2">
                            <option>Пользователь 1</option >
                            <option>Пользователь 2</option >
                            <option>Пользователь 3</option >
                            <option>Пользователь 4</option >
                            <option>Пользователь 5</option >
                            <option>Пользователь 6</option >
                            <option>Пользователь 7</option >
                        </select>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Сохранить</button>
            </div>
        </div>
    </div>
</div>

<button data-bs-toggle="modal" data-bs-target="#showPanel">Show</button>

</body>
</html>

javascript jquery html5 bootstrap html-select
Источник: Stack Overflow на русском

Ответы

▲ -2Принят

Используйте z-index для определения положения элементов по оси z

.select2-container {
    z-index: 9999 !important;
}

▲ 0

У вас ошибка была в js на 14 строке, исправив я получил правильное значение.

Ошибка:

$('#direction').select2();

Решение:

$('#direction').select();

Так же рекомендую использовать вместо label, метод из bootstrap: floating labels

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="form-floating">
  <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <label for="floatingSelect">Works with selects</label>
</div>