Select2 with Bootstrap theme not honoring input group class

Asked 21/6, 2019 at 16:16 Answered 11/6, 2024 at 18:14

I'm trying to use the select2 with an input group, but the button is always on the next line after the select2 control. If you remove the select2 class it works as expected. Why does the select2 bootstrap not honor the standard bootstrap input group classes if it's based on the bootstrap theme? What am I missing to ensure they are both on the same line and displayed as a group?

Without select2 class (and how I would like it to look)

With Select2

With Select2 and adding style="width:75%" (off at bottom)

<!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>

Passionate answered 21/6, 2019 at 16:16 Comment(0)

Yea the default bootstrap style from Select2 doesn't work that well with bootstrap. You need to write some custom styles to get what you want:

.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 has fixed width and height for the fakery search box. You have to reset them. You also need to turn on the ability of grow and shrink for the fakery search box, with flex: 1 1 auto;.

demo: https://jsfiddle.net/davidliang2008/o0tLw56f/15/

Seda answered 21/6, 2019 at 20:44 Comment(4)

Mine worked but I had to change css class ".select2-container--bootstrap" to ".select2-container" and also "width: auto !important;" – Janiecejanifer 3/11, 2023 at 11:14

i tried this on adminlte 3, but i am the error pesist – Tito 28/4, 2024 at 17:7

@Smith: I don't know what adminlte3 is. Can you create a jsfiddle demo to show the errors you're getting? – Seda 28/4, 2024 at 22:29

here is it adminlte.io/themes/v3/index.html. i explained in moore detail here #78399774 – Tito 30/4, 2024 at 9:39

Just remove:

.select2 {
  width: 100% !important; }

From the select2 CSS. It will work.

Contemptuous answered 30/9, 2021 at 12:58 Comment(1)

Bingo! All that's required when within an .input-group – Waldack 13/12, 2021 at 20:34

If none of the above works, try changing the class name slightly. This worked for me with AdminLTE3:

.input-group>.select2-container--default {
    width: auto !important;
    flex: 1 1 auto !important;
}

.input-group>.select2-container--default .select2-selection--single {
    height: 100% !important;
    line-height: inherit !important;
}

Assumpsit answered 11/6, 2024 at 18:14 Comment(1)

@smith thry with this. – Assumpsit 11/6, 2024 at 18:15

I had to do some small modifications to my stylesheet in combination with Bootstrap4.

Instead of class .select2-container--bootstrap I had to use .select2-container--bootstrap4. Additionally I marked all properties as important see as follows:

.input-group > .select2-container--bootstrap4 {
    width: auto !important;
    flex: 1 1 auto !important;
}

.input-group > .select2-container--bootstrap4 .select2-selection--single {
    height: 100% !important;
    line-height: inherit !important;
}

Insulator answered 8/9, 2021 at 11:16 Comment(0)

I have updated @David's answer as it was not working perfectly for me, borders were not proper

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

    .input-group > .select2-container--bootstrap .select2-selection--single,
    .input-group > .select2-container--default .select2-selection--single,
    .input-group > .select2-container--bootstrap .select2-selection--multiple,
    .input-group > .select2-container--default .select2-selection--multiple {
        height: 100%;
        line-height: inherit;
        border-radius: 4px 0 0 4px;
    }

        .input-group > .select2-container--bootstrap .select2-selection--single .select2-selection__rendered,
        .input-group > .select2-container--default .select2-selection--single .select2-selection__rendered,
        .input-group > .select2-container--bootstrap .select2-selection--multiple .select2-selection__rendered,
        .input-group > .select2-container--default .select2-selection--multiple .select2-selection__rendered {
            height: inherit;
            display: -webkit-box !important;
            display: -ms-flexbox !important;
            display: flex !important;
            -webkit-box-align: center !important;
            -ms-flex-align: center !important;
            align-items: center !important;
        }

        .input-group > .select2-container--bootstrap .select2-selection--single .select2-selection__arrow,
        .input-group > .select2-container--default .select2-selection--single .select2-selection__arrow,
        .input-group > .select2-container--bootstrap .select2-selection--multiple .select2-selection__arrow,
        .input-group > .select2-container--default .select2-selection--multiple .select2-selection__arrow {
            height: inherit;
        }

Perak answered 23/9, 2021 at 19:56 Comment(0)

I have been resolved this problem well! You can rebind select2 object with ajax! follow this steps:

1- Add fake div in your html page like as this

<div id="forreload"></div>

2- Create one file with this contents EX: reloadtheme.html

<script>
$(function () {
    //Initialize Select2 Elements
    $('.select2').select2()
    //Initialize Select2 Elements
    $('.select2bs4').select2({
      theme: 'bootstrap4'
    })

  })
</script>

3- Add ajax query in your page code like as this

function reloadpositions() {
        $.ajax({
            type: "GET",
            url: "reloadtheme.html" ,
            data: { temp: "0" },
            success : function(response){ //
                $("#forreload").html(response);
            }
        });
}

4- Now call reloadpositions() everywhere you want. for example in end of page or after one event that occuration this problem.

Enjoy!

Aurthur answered 9/3, 2022 at 16:55 Comment(0)

Recommended topics

Hot tags