set the width of select2 input (through Angular-ui directive)

Question

I have problem making this plunkr (select2 + angulat-ui) work.

http://plnkr.co/edit/NkdWUO?p=preview

In local setup, I get the select2 work, but I cannot set

Answer 1

On a recent project built using Bootstrap 4, I had tried all of the above methods but nothing worked. My approach was by editing the library CSS using jQuery to get 100% on the table.

 // * Select2 4.0.7

$('.select2-multiple').select2({
    // theme: 'bootstrap4', //Doesn't work
    // width:'100%', //Doesn't work
    width: 'resolve'
});

//The Fix
$('.select2-w-100').parent().find('span')
    .removeClass('select2-container')
    .css("width", "100%")
    .css("flex-grow", "1")
    .css("box-sizing", "border-box")
    .css("display", "inline-block")
    .css("margin", "0")
    .css("position", "relative")
    .css("vertical-align", "middle")

Working Demo

$('.select2-multiple').select2({
        // theme: 'bootstrap4', //Doesn't work
        // width:'100%',//Doens't work
        width: 'resolve'
    });
    //Fix the above style width:100%
    $('.select2-w-100').parent().find('span')
        .removeClass('select2-container')
        .css("width", "100%")
        .css("flex-grow", "1")
        .css("box-sizing", "border-box")
        .css("display", "inline-block")
        .css("margin", "0")
        .css("position", "relative")
        .css("vertical-align", "middle")

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />

<div class="table-responsive">
    <table class="table">
        <thead>
        <tr>
            <th scope="col" class="w-50">#</th>
            <th scope="col" class="w-50">Trade Zones</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                1
            </td>
            <td>
                <select class="form-control select2-multiple select2-w-100" name="sellingFees[]"
                        multiple="multiple">
                    <option value="1">One</option>
                    <option value="1">Two</option>
                    <option value="1">Three</option>
                    <option value="1">Okay</option>
                </select>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>

Answer 2

This is an old question but new info is still worth posting...

Starting with Select2 version 3.4.0 there is an attribute dropdownAutoWidth which solves the problem and handles all the odd cases. Note it is not on by default. It resizes dynamically as the user makes selections, it adds width for allowClear if that attribute is used, and it handles placeholder text properly too.

$("#some_select_id").select2({
    dropdownAutoWidth : true
});

Answer 3

Wanted to add my solution here as well. This is similar to Ravindu's answer above.

I added width: 'resolve', as a property within the select2:

    $('#searchFilter').select2({
        width: 'resolve',
    });

Then I added a min-width property to select2-container with !important:

.select2-container {
    min-width: 100% !important;
}

On the select element, the style='100px !important;' attribute needed !important to work:

<select class="form-control" style="width: 160px;" id="searchFilter" name="searchfilter[]">

Answer 4

Easier CSS solution independent from select2

//HTML
<select id="" class="input-xlg">
</select>
<input type="text" id="" name="" value="" class="input-lg" />

//CSS
.input-xxsm {
  width: 40px!important; //for 2 digits 
}

.input-xsm {
  width: 60px!important; //for 4 digits 
}

.input-sm {
  width: 100px!important; //for short options   
}

.input-md {
  width: 160px!important; //for medium long options 
}

.input-lg {
  width: 220px!important; //for long options    
}

.input-xlg {
  width: 300px!important; //for very long options   
}

.input-xxlg {
  width: 100%!important; //100% of parent   
}

Answer 5

With > 4.0 of select2 I am using

$("select").select2({
  dropdownAutoWidth: true
});

These others did not work:

• dropdownCssClass: 'bigdrop'
• width: '100%'
• width: 'resolve'

Answer 6

Setting width to 'resolve' didn't work for me. Instead, i added "width:100%" to my select, and modified the css like this :

.select2-offscreen {position: fixed !important;}

This was the only solution that worked for me (my version is 2.2.1) Your select will take all the available place, it is better than using

class="input-medium"

from bootstrap, because the select is always staying in the container, even after resizing the window (responsive)