Assume I have a select2 box inside a hidden div like this:

<form >   
 <div id="agent007">
  <select name="slimy" id="slimy">
   <option>Good</option>
   <option>Bad</option>
  </select>
 </div>
</form>

Where the selection box has full width and the div is hidden

select{
  width:100%
}

div{
  display:none;
}

When I make the div visible, then the selection box has no full width.

$(document).ready(function(){
  $('#slimy').select2();
  $('#agent007').show();
});

How can I make a select2 box full width that was hiding in a invisible container?

Here is a jFiddle

Assume I have a select2 box inside a hidden div like this:

<form >   
 <div id="agent007">
  <select name="slimy" id="slimy">
   <option>Good</option>
   <option>Bad</option>
  </select>
 </div>
</form>

Where the selection box has full width and the div is hidden

select{
  width:100%
}

div{
  display:none;
}

When I make the div visible, then the selection box has no full width.

$(document).ready(function(){
  $('#slimy').select2();
  $('#agent007').show();
});

How can I make a select2 box full width that was hiding in a invisible container?

Here is a jFiddle

• javascript
• html
• css
• jquery-select2

• Adding some more explanation to the answers below on why doesn't the CSS that you've added work in setting the width: Inspect the select element that you've initialized select2 to and you'll see that the select tag actually gets hidden and a new span.select2-container gets added and so the CSS select { width: 100%; } doesn't work. Hope this makes sense. – Shashank Commented Aug 14, 2018 at 14:36

4 Answers 4

You can set the width programmatically through the Select2 Configuration API. The docs make it clear that sometimes this is your best option:

Select2 will try to match the width of the original element as closely as possible. Sometimes this isn't perfect, in which case you may manually set the width configuration option

$(document).ready(function(){
  $('#slimy').select2({'width':'100%'});
  $('#agent007').css('display','block');
});

select{
  width:100%
}

div{
  display:none;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare./ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare./ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>


<form >   
 <div id="agent007">
  <select name="slimy" id="slimy">
   <option>Good</option>
   <option>Bad</option>
  </select>
 </div>
</form>

Note: due to a conflict between jQuery's show() and stack snippets, I used css('display','block') here as a workaround

According to a message from the author, it is evident that you need to destroy and reinitialise Select2. I had a similar scenario, nothing works other than reinitialising after destroying.

You are probably going to want to destroy and then re-initialize the Select2, in order to get the width to be correct.

Dynamically creating the options is not fully supported by Select2.

$(document).ready(function() {
  $("#faty").select2();
  $('#slimy').select2();
  $('#agent007').show();
  $('#slimy').select2("destroy").select2();
});

Working Snippet:

$(document).ready(function() {
  $("#faty").select2();
  $('#slimy').select2();
  $('#agent007').show();
  $('#slimy').select2("destroy").select2();
});

select {
  width: 100%
}

div {
  display: none;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare./ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare./ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<form>
  <select name="faty" id="faty">
    <option>Good</option>
    <option>Bad</option>
  </select>

  <div id="agent007">
    <select name="slimy" id="slimy">
      <option>Good</option>
      <option>Bad</option>
    </select>
  </div>
</form>

May be working in JSFiddle: https://jsfiddle/49zg2x6w/

If you want a CSS solution you can try the below:

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

working fiddle link for you - https://jsfiddle/jithinrajpr7/26uroj7b/19/

Check the updated fiddle now.

https://jsfiddle/26uroj7b/9/

$(document).ready(function(){
    $("#faty").select2();
    $('#agent007').show();
    $('#slimy').select2();
});

You can initialize the select2 after displaying div.