select2 fullwidth in hidden div?

Question

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

Maice

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. – Thiouracil

Answer 1

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/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.net/49zg2x6w/

Elmaleh

I think this answer is suboptimal - first of all the statement "nothing works other than reinitialising after destroying" is not true as demonstrated in my answer below. Secondly, the OP is not "dynamically creating the options" which is what the link you referenced is working around. There is a setting for width in the API and the OPs situation is exactly why it exists. – Latinism

@billynoah Ah... Let me check it out too. Thanks for letting me know. – Elmaleh

Answer 2

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

Latinism

Answer 3

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

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

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

Jerz

why -ve please comment the issue so I can rectify the bug. – Jerz

Answer 4

Check the updated fiddle now.

https://jsfiddle.net/26uroj7b/9/

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

You can initialize the select2 after displaying div.

Khadijahkhai

What if the scenario is dynamic? You gotta destroy and reinitialise. – Elmaleh

but, as long as it is the first time only. Initializing after showing div would be fine, right? Your answer is good. I have just tried to put some other way. – Khadijahkhai

Yes, you are right, but think about bigger applications who have a common selector, like $(".select2").select2() at the start. Something like that. Don't take it wrong, I am just telling you. :) – Elmaleh

No buddy. I am learning, so trying to grasp more knowledge from friends like you. :) Got your point. ;) – Khadijahkhai

Sure, any time... :) – Elmaleh