select2ドロップダウンスタイルとプレースホルダの問題

Question

私は壁に当たった！私のselect2ドロップボックス（写真の各行の中央に位置する）はjsfiddleでうまく動作しますが、私のWebページに正確なコードを転送すると2つの奇妙な問題が発生します。最初に、プレースホルダの名前は、最初の1つではなく、4番目のDropboxから開始します。まったくマージントップがあるかのように、どこかにあります。

第二に、ドロップダウンが巨大になってきているとあまりにも広がります。それとは別に

、他のすべてのスタイルとjQueryの仕事美しく！私はすべての記事を見て、すべてのCSSとHTMLを調整し、何もこれで2日間過ごしました。誰もがアイデアを提供できますか？私はバージョン4.0.3を使用しており、以下にいくつかの必須のCSSとjqueryを含んでいます（長さは申し訳ありません）。

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; 
} 







<div id="Lower_container_TradeProdsListBoxID_tr" class="Lower_container_TradeProdsListBoxClass_tr"> 


<div class = "TradeProds_RowProductsTitles">Steel semi-finished products</div> 

<label><input type="checkbox" id="tr_ingot" value="ingot" />Ingot</label> 

<select id="drop_ingot" multiple="multiple"> 
<option value="Carbon">Carbon</option> 
<option value="Stainless">Stainless</option> 
<option value="Alloy">Alloy</option> 
</select> 

<a href="#" id="TradeProdsPOPUPLink_ingot_ID" class="RHLabelClass" >Trade codes</a> 



<label><input type="checkbox" id="tr_billetbloom" value="billetbloom" />Billet and Bloom</label> 

<select id="drop_billetbloom" multiple="multiple"> 
<option value="Carbon">Carbon</option> 
<option value="Stainless">Stainless</option> 
</select> 

<a href="#" id="TradeProdsPOPUPLink_billetbloom_ID" class="RHLabelClass" >Trade codes</a> 



<label><input type="checkbox" id="tr_slab" value="slab" />Slab</label> 

<select id="drop_slab" multiple="multiple"> 
<option value="Carbon">Carbon</option> 
<option value="Stainless">Stainless</option> 
</select> 

<a href="#" id="TradeProdsPOPUPLink_slab_ID" class="RHLabelClass" >Trade codes</a> 



<label><input type="checkbox" id="tr_rounds" value="rounds" />Rounds & other semis</label> 

<select id="drop_rounds" multiple="multiple"> 
<option value="Carbon">Carbon</option> 
</select> 

<a href="#" id="TradeProdsPOPUPLink_rounds_ID" class="RHLabelClass" >Trade codes</a> 



<label><input type="checkbox" id="tr_othersemis" value="othersemis" />Other semis</label> 

<select id="drop_othersemis" multiple="multiple"> 
<option value="Carbon">Carbon</option> 
<option value="Alloy">Alloy</option> 
</select> 

<a href="#" id="TradeProdsPOPUPLink_othersemis_ID" class="RHLabelClass" >Trade codes</a> 



<div class = "TradeProds_RowProductsTitles">Steel Finished Long Products</div> 

<label><input type="checkbox" id="tr_rebar" value="rebar" />Rebar/debar</label> 

<select id="drop_rebar" multiple="multiple"> 
<option value="Carbon">Carbon</option> 
</select> 

<a href="#" id="TradeProdsPOPUPLink_rebar_ID" class="RHLabelClass" >Trade codes</a> 


<label><input type="checkbox" id="tr_barrodcoil" value="barrodcoil" />Bar & wire rod (coiled)</label> 

<select id="drop_barrodcoil" multiple="multiple"> 
<option value="Carbon">Carbon</option> 
<option value="Stainless">Stainless</option> 
<option value="Alloy">Alloy</option> 
</select> 

<a href="#" id="TradeProdsPOPUPLink_barrodcoil_ID" class="RHLabelClass" >Trade codes</a> 



<label><input type="checkbox" id="tr_barflats" value="barflats" />HR bar & flats</label> 

<select id="drop_barflats" multiple="multiple"> 
<option value="Carbon">Carbon</option> 
<option value="Stainless">Stainless</option> 
<option value="Alloy">Alloy</option> 
</select> 

<a href="#" id="TradeProdsPOPUPLink_barflats_ID" class="RHLabelClass" >Trade codes</a> 


<!----------------> 

</div>