Select2 应用引导输入-lg

Question

How can I implement input-lg class in a select2 dropdown? I wan't my dropdown to have the same size as an input element having a class of input-lg here's what I have so far

<div class="col-sm-4">
     <label for="mobile" class="control-label"><span class="text-danger">*</span> Nationality</label>
     <input type="text" id="nationality" name="nationality" class="form-control input-lg" />
</div>

<div class="col-sm-4 padding-minimum">
     <label for="mobile" class="control-label"><span class="text-danger">*</span> Gender</label>
     <select name="gender" id="gender" class="form-control select2-container input-lg step2-select" data-placeholder="Select Gender">
         <option></option>
         <option value="1">Male</option>
         <option value="0">Female</option>
     </select>
</div>

And here is my script

<script>
  $(document).ready(function(){
    $('select').select2();
  });
</script>

But It seems that once initialized the dropdown is not the same size as an input field having a class of input-lg eventhough I placed a class of input-lg on my select element. Any idea on how to implement this? I just want the select2 to have the same height as the input field

I'm using select2 version 4.0.0 and the css is version 3.5.2 I think

Answer 1

To make select equal in height of input, make following changes in CSS and remove input-lg selector from <select> it's unnecessary and no use of it

 $(document).ready(function () { $('select').select2(); });

 .select2-container--default .select2-selection--single { height: 46px !important; padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 6px; } .select2-container--default .select2-selection--single .select2-selection__arrow b { top: 85% !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 26px !important; } .select2-container--default .select2-selection--single { border: 1px solid #CCC !important; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" /> <div class="col-sm-4"> <label for="mobile" class="control-label"><span class="text-danger">*</span> Nationality</label> <input type="text" id="nationality" name="nationality" class="form-control input-lg" /> </div> <div class="col-sm-4 padding-minimum"> <label for="mobile" class="control-label"><span class="text-danger">*</span> Gender</label> <select name="gender" id="gender" class="form-control select2-container step2-select" data-placeholder="Select Gender"> <option></option> <option value="1">Male</option> <option value="0">Female</option> </select> </div>

Fiddle

Answer 2

I found this dedicated CSS (select2-bootstrap-theme) to work quite well.

bower install select2-bootstrap-theme

<link rel="stylesheet" href="select2.css">
<link rel="stylesheet" href="select2-bootstrap.css">

$( "#dropdown" ).select2({
    theme: "bootstrap"
});

select2.full.js is told to be required to be able to manage the sizes, but I seemed to get it working without the "full" version

Answer 3

In your css place input-lg+ before you class .select2-container example: `

.input-lg+.select2-container--default .select2-selection--single {
    height: 46px !important;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 6px;
}
.input-lg+.select2-container--default .select2-selection--single .select2-selection__arrow b {
    top: 85% !important;
}
.input-lg+.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 26px !important;
}
.input-lg+.select2-container--default .select2-selection--single {
    border: 1px solid #CCC !important;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}

` using @Shehary example

Answer 4

all you need is just set select2 to use bootstrap themes by download select2 add-on CSS

https://github.com/select2/select2-bootstrap-theme

<link href="js/select2-bootstrap-theme/dist/select2-bootstrap.min.css" rel="stylesheet">

then on JS part

$('.select2').select2({
    theme: "bootstrap"
});

(without bootstrap-theme)

(with bootstrap-theme)

Answer 5

While select2-bootstrap-theme is for Bootstrap v3, You can use this for Bootstrap v4 .

Installation

$ npm install @ttskch/select2-bootstrap4-theme

Usage

<link rel="stylesheet" href="/path/to/select2.css">
<link rel="stylesheet" href="/path/to/select2-bootstrap4.css">

$('select').select2({
   theme: 'bootstrap4',
});

And here is its Demo