title: Select2 dropdown does not render correct if hidden
body: <p>In my code I have a select2 element.</p>
  
  <p>I get the data from a separate ajax call and in the done section I create the select2 element.</p>
  
  <p>This works fine as long as the select element is visible. If the wrapping div got hidden by jQuery before I create the select2 element, it will not render correct.</p>
  
  <p>The width is totally messed up.</p>
  
  <p>Is there something like a re-render that I trigger?</p>
  
  <p>I also tried to force a width by style, but with no effect.</p>
  
  <p>html</p>
  
  <pre><code> &lt;div id="ddWrapper1" style="width: 400px, height 50px"&gt;
    dd1
    &lt;select id="dd1" style="width: 100%"&gt;&lt;/select&gt;
  &lt;/div&gt;
  
  &lt;div id="ddWrapper2" style="width: 400px, height 50px"&gt;
    dd2
    &lt;select id="dd2" style="width: 100%"&gt;&lt;/select&gt;
  &lt;/div&gt;
  
  &lt;button id='btnToggle'&gt;
    toggle wrapper visibility
  &lt;/button&gt;
  </code></pre>
  
  <p>js</p>
  
  <pre><code>$(document).ready(function() {
    $('#ddWrapper2').hide();
  
    var ddDate = [{
      id: 1,
      text: 'some item'
    }, {
      id: 2,
      text: 'even more items'
    }, {
      id: 3,
      text: 'oh no'
    }, {
      id: 4,
      text: 'that is a really long item name...'
    }];
  
    $('#dd1').select2({
      data: ddDate,
      allowClear: true,
      multiple: true,
      placeholder: '[dd1] select some items'
    });
  
    $('#dd2').select2({
      data: ddDate,
      allowClear: true,
      multiple: true,
      placeholder: '[dd2] select some items'
    });
  
    $('#btnToggle').on('click', function() {
      $('#ddWrapper1').toggle();
      $('#ddWrapper2').toggle();
    });
  
  });
  </code></pre>
  
  <p>Here is an jsfiddle with example code: <a href="https://jsfiddle.net/soulflyman/m32br8vn/" rel="nofollow noreferrer">https://jsfiddle.net/soulflyman/m32br8vn/</a></p>