title: How to make dropdown menu open left using Select2 4.0
body: <p>I saw an example in jsfiddle that makes the dropdown box open left if the screen is too small: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() { 
      $("#e1").select2({dropdownCssClass : 'bigdrop'}); 
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#e1 {
      width: 100px;       
  }
  .bigdrop{
      width: 600px !important;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://cdn.jsdelivr.net/select2/3.3.2/select2.js"&gt;&lt;/script&gt;
  &lt;link href="http://cdn.jsdelivr.net/select2/3.3.2/select2.css" rel="stylesheet"/&gt;
  
  &lt;body&gt;
      &lt;select id="e1"&gt;
         &lt;option value="AL"&gt;Alabama&lt;/option&gt;
         &lt;option value="WY"&gt;Wyoming&lt;/option&gt;
         &lt;option value="WY"&gt;very long long long text&lt;/option&gt;
         &lt;option value="WY"&gt;very long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long text&lt;/option&gt;
      &lt;/select&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Original Snippet here:</p>
  
  <ul>
  <li><a href="http://jsfiddle.net/ewwAX/1/" rel="nofollow">http://jsfiddle.net/ewwAX/1/</a></li>
  </ul>
  
  <p>I am using select2 4.0 Full version and I wish to have the same behavior. Moreover, I would like my dropdown box to always open left as well, but even though the code is identical I cannot make that happen due to the different library versions:</p>
  
  <ul>
  <li><a href="https://jsfiddle.net/vv6hgos5/" rel="nofollow">https://jsfiddle.net/vv6hgos5/</a></li>
  </ul>
  
  <p>I have searched and read questions here, but all I found was ways to prevent the dropdown from switching to drop-up when the page is too small, and that is not what I am looking for.</p>
  
  <p>How can I achieve this?</p>