Select2 apply bootstrap input-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

Auriga

jsfiddle.net/o2Lcru85 – Ragamuffin

This works great thanks – Auriga

Answer 1

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

Apron

Answer 2

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

Ragamuffin

This works. But for what it's worth you don't need any of those !important declarations. The only thing this is missing is a width: 100% !important - the !important is needed on that as Select2 calculates the width of the element based on the outer width of its container (thus ignoring padding). The width declaration here takes padding into account. – Insulin

Answer 3

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)

Yolande

Answer 4

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

Saith