select2 выравнивание не работает

Question

select2-3.5.2 работал нормально. но как только я обновляюсь до 4.0.3, он внезапно появляется в левой части страницы. Я использую jquery-UI, надеясь, что эти двое будут хорошо играть вместе.

поплавок: правый; не оказывает никакого влияния на select2-4.0.3

<div style="position:absolute; top:0px; left:0px; width:100%" class="ui-widget infobar-wrapper"> 
     <div name="ibar1" id="ibar1" class="ui-widget-header infobar"> 
      <select name="themes" id="themes" style="float:right;"> <!--margin-top:-3px;--> 
       <option></option> 
       <option value="black-tie">black-tie</option> 
       <option value="trontastic">trontastic</option> 
       <option value="ui-darkness">ui-darkness</option> 
       <option value="ui-lightness">ui-lightness</option> 
      </select> 
     </div> 
    </div> 

, как я это сделать в JS:

$("#themes").select2({dropdownAutoWidth:true,placeholder:'Change theme'}); 

CSS:

.infobar { 
    height:27px; 
    font-weight:bold; 
    overflow:hidden; 
    border:0px; 
} 

Answer 1

Появляются, но он также появляется float следует перенести на другой элемент.

CSS

.infobar { 
    height: 27px; 
    font-weight: bold; 
    overflow: hidden; 
    border: 0px; 
} 

.infobar .select2-container { 
    float: right; 
} 

Рабочий пример: https://jsfiddle.net/Twisty/Lq7q5xxj/