javascript - select2 bootstrap sizing issue - Stack Overflow

admin管理员组

文章数量:1310455

I am trying to use a multiple select2 select form in my html with bootstrap. But I'm having issue with sizing, the select2 box is not working with the grid, and it also gurbles the size of next item. The html

<div class="select2-container col-md-11">
    <select class="form-control s2" id="plaint" multiple="multiple" name=
    "plaint[]">
        <option value="bad_breath">
            Bad Breath
        </option>
        <option value="bleeding_gum">
            Bleeding Gum
        </option>
        <option value="swollen_gum">
            Swollen Gum
        </option>
        <option value="gum_pain">
            Gum Pain
        </option>
        <option value="loose_teeth">
            Loose Teeth
        </option>
        <option value="sensitive_teeth">
            Sensitive Teeth
        </option>
        <option value="darkened_teeth">
            Darkened Teeth
        </option>
        <option value="damaged_teeth">
            Damaged Teeth
        </option>
    </select>
</div>

The JS

<script type="text/javascript">
$(".s2").select2({
    closeOnSelect: false
});
$(document).ready(function() {});

Full code here

I am trying to use a multiple select2 select form in my html with bootstrap. But I'm having issue with sizing, the select2 box is not working with the grid, and it also gurbles the size of next item. The html

<div class="select2-container col-md-11">
    <select class="form-control s2" id="plaint" multiple="multiple" name=
    "plaint[]">
        <option value="bad_breath">
            Bad Breath
        </option>
        <option value="bleeding_gum">
            Bleeding Gum
        </option>
        <option value="swollen_gum">
            Swollen Gum
        </option>
        <option value="gum_pain">
            Gum Pain
        </option>
        <option value="loose_teeth">
            Loose Teeth
        </option>
        <option value="sensitive_teeth">
            Sensitive Teeth
        </option>
        <option value="darkened_teeth">
            Darkened Teeth
        </option>
        <option value="damaged_teeth">
            Damaged Teeth
        </option>
    </select>
</div>

The JS

<script type="text/javascript">
$(".s2").select2({
    closeOnSelect: false
});
$(document).ready(function() {});

Full code here http://www.codeply./go/Ly1UHW2HT2

• javascript
• html
• css
• twitter-bootstrap
• jquery-select2

Share Improve this question Follow edited Apr 26, 2016 at 14:32 Shawon0418 asked Apr 26, 2016 at 14:15 Shawon0418Shawon0418 31111 gold badge44 silver badges1212 bronze badges 1

• 1 Too late for this thread, but if someone is using select2 from select2 then please check this link select2/appearance which has the method to set the width of the control. – sunitkatkar Commented Dec 3, 2018 at 2:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

First Add in your select box : <select data-width="100%"></select> Add This JS and CSS in you header :

<script src="https://ajax.googleapis./ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare./ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare./ajax/libs/select2/4.0.2/js/select2.min.js"></script>

to fix the layout (widths not correct) you need to wrap the contents in a form-group:

<div class="form-group">
    <label class="col-md-1 control-label" for="select">Label</label>
    <div class="select2-container col-md-11">
       <select id="select" class="form-control s2" multiple="multiple" name="name[]" data-width="100%">
            <option value="o1">Option 1</option>
            <option value="o2">Option 2</option>
        </select>
    </div>
</div>

Re the JS, I think there is an issue with codeply as copying the html and js and referencing the scripts and links directly in codepen works. See here for an example.

本文标签： javascriptselect2 bootstrap sizing issueStack Overflow