title: Select2 dropdown wrong position
body: <p>I am working with Select2 library (version 4.0.1), but I have strange position of the dropdown of the select. You can see on the image below.
  <a href="https://i.stack.imgur.com/BAS9d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BAS9d.png" alt="enter image description here"></a></p>
  
  <p>You can see that select2 dropdown overlaps the select area and I can see in the example in the documentation that it should appear at the bottom of the select. Here is my code</p>
  
  <pre><code>&lt;select class="select2"&gt;
     &lt;option&gt;--Select--&lt;/option&gt;
     &lt;option&gt;Sample Page&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;script&gt;
    jQuery(document).ready(function() {
      jQuery('.select2').select2();
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>Any ideas why this is happening?</p>