Select2 с темой Bootstrap не учитывает класс входной группы - PullRequest
Новая
       57

Select2 с темой Bootstrap не учитывает класс входной группы

0 голосов
/ 21 июня 2019

Я пытаюсь использовать select2 с группой ввода, но кнопка всегда находится на следующей строке после элемента управления select2.Если вы удалите класс select2, он будет работать как положеноПочему загрузчик select2 не учитывает стандартные классы входной группы начальной загрузки, если он основан на теме начальной загрузки?Чего мне не хватает, чтобы убедиться, что они оба находятся на одной строке и отображаются как группа?

Без класса select2 (и как бы я хотел, чтобы он выглядел) enter image description here

С Select2

enter image description here

С Select2 и добавлением стиля = "ширина: 75%" (внизу) enter image description here

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" />
    <link rel="stylesheet" href="https://select2.github.io/select2-bootstrap-theme/css/select2-bootstrap.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.full.js"></script>
</head>
<body class="container">
    <p></p>
    <div class="input-group">
        <select class="form-control select2" placeholder="Search"></select>
        <div class="input-group-append">
            <button class="btn btn-success" type="submit">Go</button>
        </div>
    </div>
</body>
</html>

<script>
    $(".select2").select2({
        theme: "bootstrap",
        placeholder: "Search"
} );
</script>

1 Ответ

0 голосов
/ 21 июня 2019

Да, стиль начальной загрузки по умолчанию из Select2 не очень хорошо работает с bootstrap . Вам нужно написать несколько пользовательских стилей, чтобы получить то, что вы хотите: 

.input-group > .select2-container--bootstrap {
    width: auto;
    flex: 1 1 auto;
}

.input-group > .select2-container--bootstrap .select2-selection--single {
    height: 100%;
    line-height: inherit;
    padding: 0.5rem 1rem;
}

Select2 имеет фиксированную ширину и высоту для окна поиска по подделке. Вы должны сбросить их. Вам также нужно включить возможность роста и сжатия для окна поиска по подделке: flex: 1 1 auto;.

enter image description here

демо: https://jsfiddle.net/davidliang2008/o0tLw56f/15/

...