title: select2 problems with dropdown style and placeholders
body: <p>I've hit a wall!  My select2 drop boxes (positioned in the middle of each row in the pictures) work beautifully in jsfiddle but when I transfer the exact code to my webpage I get 2 strange issues.  First, the placeholder names start in the 4th dropbox instead of the first one, almost as if there's a margin-top somewhere, which there isn't.</p>
  
  <p><a href="https://i.stack.imgur.com/I5DMt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/I5DMt.png" alt="Wrong placeholder locations"></a></p>
  
  <p>Secondly, the dropdown has become huge and far too spread out.</p>
  
  <p><a href="https://i.stack.imgur.com/kKLlv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kKLlv.png" alt="Over-large dropdown"></a></p>
  
  <p>Apart from that, all the other styles and jquery work beautifully!  I've spent 2 days on this, looking through all posts, adjusting all the css and html, and nothing. Can anyone offer any ideas?   I'm using version 4.0.3 and include some essential css and jquery below (sorry for the length).</p>
  
  <pre><code>https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js
  
  $( function() {
  
    $("#drop_ingot").select2({ placeholder: "Iron / steel types", });
    $("#drop_billetbloom").select2({ placeholder: "Iron / steel types", });
    $("#drop_slab").select2({ placeholder: "Iron / steel types", });
    $("#drop_rounds").select2({ placeholder: "Iron / steel types", });
    $("#drop_othersemis").select2({ placeholder: "Iron / steel types", });  
    $("#drop_rebar").select2({ placeholder: "Iron / steel types", });
    $("#drop_barrodcoil").select2({ placeholder: "Iron / steel types", });  
    $("#drop_barflats").select2({ placeholder: "Iron / steel types", });  
  
  // This code ensures the drop menu disappears when deleting a tag.
  $('[id^="drop_"]').on("select2:unselecting", function (e) {
      $(this).data('unselecting', true);
    }).on('select2:open', function(e) {
      if ($(this).data('unselecting')) {
        $(this).select2('close').removeData('unselecting');
      }
    });
  });
  
  
  
  
  .select2-container--default .select2-selection--multiple {
  display: inline-block;
  background-color: #FCFCFC;
  border: 1px solid #DEDEDE;
  border-radius: 5px;
  cursor: text;
  height: 24px;
  padding: 0px 0px 0px 0px;
  margin: 0px 2px 2px 1px;
  cursor: pointer;
  width:198px;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  }
  
  .select2-container .select2-search--inline {
  float: left
  }
  
  .select2-container--default .select2-search--inline .select2-search__field {
  box-sizing: border-box;
  background: transparent; 
  border: none;
  font-size: 100%;
  outline: 0;
  margin-top: 4px;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: textfield
  }
  
  .select2-dropdown {
  background-color: white;
  border: 1px solid darkorange;
  border-radius: 0px;
  box-sizing: border-box;
  display: block;
  position: absolute;
  font-family: 'Arial', Verdana;
  font-size: 12px;
  margin-left: 2px;
  z-index: 100;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  
  .select2-results {
  display: block;
  }
  
  .select2-results__options {
  list-style: none;
  margin: 0;
  padding: 0px;
  }
  
  .select2-results__option {
  padding: 6px;
  user-select: none;
  -webkit-user-select: none
  }
  
  .select2-results__option[aria-selected] {
  cursor: pointer
  }
  
  .select2-container--open .select2-dropdown {
  left: 0px;
  }
  
  .select2-container--open .select2-dropdown--below {
  border-top: none;
  }
  
  .select2-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  }
  
  #drop_ptseamless + .select2-container--default .select2-selection--multiple{
  height: auto;
  min-height: 24px;
  max-height: 45px;
  padding: 0px 0px 3px 0px;
  }
  
  #drop_ptwelded + .select2-container--default .select2-selection--multiple{
    height: auto;
    min-height: 24px;
    max-height: 45px;
    padding: 0px 0px 3px 0px;
  }
  
  .tagContainerHoverClass:hover {
  border: 1px solid darkorange !important;
  background-color: white;
  cursor: pointer;
  }
  
  .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  box-sizing: border-box;
  list-style: none;
  margin: 0;
  padding: 0px 0px 0px 4px;
  width: 100%;
  }
  
  .select2-container--default .select2-selection--multiple .select2-selection__choice {
  color: black;
  border-radius: 4px;
  cursor: default;
  float: left;
  font-size: 12px;
  margin: 3px 3px 0px 0px;
  padding: 0 6px 0px 3px;
  background:    #fff;
  background:    -webkit-linear-gradient(#fff, #dadada);
  background:    linear-gradient(#fff, #dadada);
  border:        1px solid #878787;
  box-shadow:    0 0px 0 0 #666;
  text-shadow:   1px 1px 0 #f3f3f3;
  }
  
  .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #5E5E5E;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  margin-right: 3px
  }
  
  .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: red;
  font-size: 105%;
  }
  
  .select2-container--default .select2-results__option[aria-disabled=true] {
  color: #999;
  }
  
  .select2-container--default .select2-results__option[aria-selected=true] {
  color: red!important;
  }
  
  .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #CEDDF0;
  }
  
  .select2-container--default .select2-results__group {
  cursor: default;
  display: block;
  padding: 6px
  }
  
  .select2-results__option[aria-selected=true] {
  display: none;
  }
  
  .select2-container--default.select2-container--focus .select2-selection--multiple {
  outline:none;
  }
  
  
  
  
  
  
  
  &lt;div id="Lower_container_TradeProdsListBoxID_tr" class="Lower_container_TradeProdsListBoxClass_tr"&gt;
  
  
  &lt;div class = "TradeProds_RowProductsTitles"&gt;Steel semi-finished products&lt;/div&gt;
  
  &lt;label&gt;&lt;input type="checkbox"  id="tr_ingot" value="ingot" /&gt;Ingot&lt;/label&gt;
  
  &lt;select id="drop_ingot" multiple="multiple"&gt;
  &lt;option value="Carbon"&gt;Carbon&lt;/option&gt;
  &lt;option value="Stainless"&gt;Stainless&lt;/option&gt;
  &lt;option value="Alloy"&gt;Alloy&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;a href="#" id="TradeProdsPOPUPLink_ingot_ID" class="RHLabelClass" &gt;Trade codes&lt;/a&gt;
  
  
  
  &lt;label&gt;&lt;input type="checkbox"  id="tr_billetbloom" value="billetbloom" /&gt;Billet and Bloom&lt;/label&gt;
  
  &lt;select id="drop_billetbloom" multiple="multiple"&gt;
  &lt;option value="Carbon"&gt;Carbon&lt;/option&gt;
  &lt;option value="Stainless"&gt;Stainless&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;a href="#" id="TradeProdsPOPUPLink_billetbloom_ID" class="RHLabelClass" &gt;Trade codes&lt;/a&gt;
  
  
  
  &lt;label&gt;&lt;input type="checkbox"  id="tr_slab" value="slab" /&gt;Slab&lt;/label&gt;
  
  &lt;select id="drop_slab" multiple="multiple"&gt;
  &lt;option value="Carbon"&gt;Carbon&lt;/option&gt;
  &lt;option value="Stainless"&gt;Stainless&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;a href="#" id="TradeProdsPOPUPLink_slab_ID" class="RHLabelClass" &gt;Trade codes&lt;/a&gt;
  
  
  
  &lt;label&gt;&lt;input type="checkbox"  id="tr_rounds" value="rounds" /&gt;Rounds &amp; other semis&lt;/label&gt;
  
  &lt;select id="drop_rounds"  multiple="multiple"&gt;
  &lt;option value="Carbon"&gt;Carbon&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;a href="#" id="TradeProdsPOPUPLink_rounds_ID" class="RHLabelClass" &gt;Trade codes&lt;/a&gt;
  
  
  
  &lt;label&gt;&lt;input type="checkbox"  id="tr_othersemis" value="othersemis" /&gt;Other semis&lt;/label&gt;
  
  &lt;select id="drop_othersemis"  multiple="multiple"&gt;
  &lt;option value="Carbon"&gt;Carbon&lt;/option&gt;
  &lt;option value="Alloy"&gt;Alloy&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;a href="#" id="TradeProdsPOPUPLink_othersemis_ID" class="RHLabelClass" &gt;Trade codes&lt;/a&gt;
  
  
  
  &lt;div class = "TradeProds_RowProductsTitles"&gt;Steel Finished Long Products&lt;/div&gt;
  
  &lt;label&gt;&lt;input type="checkbox"  id="tr_rebar" value="rebar" /&gt;Rebar / debar&lt;/label&gt;
  
  &lt;select id="drop_rebar"  multiple="multiple"&gt;
  &lt;option value="Carbon"&gt;Carbon&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;a href="#" id="TradeProdsPOPUPLink_rebar_ID" class="RHLabelClass" &gt;Trade codes&lt;/a&gt;
  
  
  &lt;label&gt;&lt;input type="checkbox"  id="tr_barrodcoil" value="barrodcoil" /&gt;Bar &amp; wire rod (coiled)&lt;/label&gt;
  
  &lt;select id="drop_barrodcoil"  multiple="multiple"&gt;
  &lt;option value="Carbon"&gt;Carbon&lt;/option&gt;
  &lt;option value="Stainless"&gt;Stainless&lt;/option&gt;
  &lt;option value="Alloy"&gt;Alloy&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;a href="#" id="TradeProdsPOPUPLink_barrodcoil_ID" class="RHLabelClass" &gt;Trade codes&lt;/a&gt;
  
  
  
  &lt;label&gt;&lt;input type="checkbox"  id="tr_barflats" value="barflats" /&gt;HR bar &amp; flats&lt;/label&gt;
  
  &lt;select id="drop_barflats"  multiple="multiple"&gt;
  &lt;option value="Carbon"&gt;Carbon&lt;/option&gt;
  &lt;option value="Stainless"&gt;Stainless&lt;/option&gt;
  &lt;option value="Alloy"&gt;Alloy&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;a href="#" id="TradeProdsPOPUPLink_barflats_ID" class="RHLabelClass" &gt;Trade codes&lt;/a&gt;
  
  
  &lt;!----------------&gt;
  
  &lt;/div&gt;
  </code></pre>