CODEWITHSUNDEEP
csstwitter-bootstrapangularjsjquery-select2
bsr
bsr

Reputation: 58742

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

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 the width as described in the docs. It is too narrow to be used.

enter image description here

Thank you.

EDIT: Never mind that plnkr, I found a working fiddle here http://jsfiddle.net/pEFy6/

It looks like it is the behavior of select2 to collapse to the width of first element. I could set the width through bootstrap class="input-medium" .Still not sure why angular-ui doesn't take config parameters.

Upvotes: 177

Views: 230793

Answers (16)

dominique Goubet
dominique Goubet

Reputation: 1

With Select2 v4.1.0 (https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js) none of the solutions above did work. But .select2-container { min-width: 100%; } did the trick

Hope this can help

Upvotes: 0

Creek
Creek

Reputation: 215

This is work for me. After create select componant and then add your customer css attribute.

$(select).select2({
//....create select componant content
});

$("span.select2-container").addClass(yourDefClass);

In the css file. configure your style and add !important.

.yourDefClass{
    width: 700px !important;
}

Upvotes: 0

Solomon Tesfaye
Solomon Tesfaye

Reputation: 346

Other Way you can use is setting width in style on your Select tag.

<select id="myselect" style="width: 20%;">
    <option>...</option>
</select>

Then, use this

$(document).ready(function() { 
    $("#myselect").select2({ width: 'style' }); //This will use style attr of the select element  
});

Upvotes: 1

doncadavona
doncadavona

Reputation: 7760

Add this in your stylesheet:

.select2 {
  width: unset !important;
}

Upvotes: 2

self-taught301
self-taught301

Reputation: 31

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[]">

Upvotes: 2

Abdelsalam Shahlol
Abdelsalam Shahlol

Reputation: 1769

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>

Upvotes: 0

Ravindu Lokumanna
Ravindu Lokumanna

Reputation: 71

Add width resolve option to your select2 function 

$(document).ready(function() { 
        $("#myselect").select2({ width: 'resolve' });           
});

After add below CSS to your stylesheet

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

It will sort the issue

Upvotes: 7

Adrian P.
Adrian P.

Reputation: 5228

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   
}

Upvotes: 0

Bablu Ahmed
Bablu Ahmed

Reputation: 5020

You can try like this. It works for me

$("#MISSION_ID").select2();

On hide/show or ajax request, we have to reinitialize the select2 plugin

For example:

$("#offialNumberArea").show();
$("#eventNameArea").hide();

$('.selectCriteria').change(function(){
    var thisVal = $(this).val();
    if(thisVal == 'sailor'){
        $("#offialNumberArea").show();
        $("#eventNameArea").hide();
    }
    else
    {
        $("#offialNumberArea").hide();
        $("#eventNameArea").show();
        $("#MISSION_ID").select2();
    }
});

Upvotes: 0

sobelito
sobelito

Reputation: 1625

With > 4.0 of select2 I am using

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

These others did not work:

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

Upvotes: 15

Sadee
Sadee

Reputation: 3180

select2 V4.0.3

<select class="smartsearch" name="search" id="search" style="width:100%;"></select>

Upvotes: 25

Shep
Shep

Reputation: 586

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
});

Upvotes: 56

atuk
atuk

Reputation: 109

add method container css in your script like this :

$("#your_select_id").select2({
      containerCss : {"display":"block"}
});

it will set your select's width same as width your div.

Upvotes: 10

benathon
benathon

Reputation: 7653

In my case the select2 would open correctly if there was zero or more pills.

But if there was one or more pills, and I deleted them all, it would shrink to the smallest width. My solution was simply:

$("#myselect").select2({ width: '100%' });

Upvotes: 287

helene
helene

Reputation: 66

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)

Upvotes: 2

Diego Alvarez
Diego Alvarez

Reputation: 2847

You need to specify the attribute width to resolve in order to preserve element width

$(document).ready(function() { 
    $("#myselect").select2({ width: 'resolve' });           
});

Upvotes: 230

Related Questions