La hauteur de glyphicons ne correspondant pas avec select2 menu déroulant

Question

Quand j'ajouter select2 dropdown la hauteur de l'icône de glyphicons n'a pas été même

Voici le code html

<form class="well form-horizontal" action=" " method="post" id="user_edit"> 

    <div class="form-group"> 
     <label class="col-md-1 nopadding control-label"></label> 
     <div class="col-md-8 nopadding inputGroupContainer"> 
      <div class="input-group field-width"> 

      <span class="input-group-addon" > 
       <i class="fa fa-venus-mars" ></i></span> 
       <select name="gender" id="gender" class="gender form-control 
    js-example-basic-single"> 
        <option value="">Not Telling</option> 
        <option value="m">Male</option> 
        <option value="f">Female</option> 
       </select> 

      </div> 
     </div> 
    </div> 
    </form> 

Le fichier js

$(document).ready(function() { 
    $(".js-example-basic-single").select2(); 
}); 

Le fichier css que j'ajoute pour select2

.glyphicon{ 
color:#007bcc; 
} 
.select2-selection__rendered{ 
line-height: 32px!important; 
} 
[class^='select2'] { 
border-radius: 0px !important; 
} 

.select2-selection__arrow{ 
    height: 34px;!important; 
    } 
.select2-container--default .select2-selection--single{ 
background-color: #eeeeee !important; 
height: 34px!important; 
font-size: 15px;!important; 
    margin-top: 0.5px!important; 
margin-left: -1px!important; 

} 

Lorsque je zoome la page de plus de 100% la même hauteur.

Answer 1

Retirer margin-top: 0.5px!important; de .select2-container--default .select2-selection--single

$(document).ready(function() { 
 
    $(".js-example-basic-single").select2(); 
 
});

.glyphicon{ 
 
color:#007bcc; 
 
} 
 
.select2-selection__rendered{ 
 
line-height: 32px!important; 
 
} 
 
[class^='select2'] { 
 
border-radius: 0px !important; 
 
} 
 

 
.select2-selection__arrow{ 
 
    height: 34px;!important; 
 
    } 
 
.select2-container--default .select2-selection--single{ 
 
background-color: #eeeeee !important; 
 
height: 34px!important; 
 
font-size: 15px;!important; 
 

 
margin-left: -1px!important; 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css"> 
 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <form class="well form-horizontal" action=" " method="post" id="user_edit"> 
 
    <div class="form-group"> 
 
     <label class="col-md-1 nopadding control-label"></label> 
 
     <div class="col-md-8 nopadding inputGroupContainer"> 
 
      <div class="input-group field-width"> 
 
      <span class="input-group-addon" > 
 
       <i class="fa fa-venus-mars" ></i></span> 
 
       <select name="gender" id="gender" class="gender form-control 
 
    js-example-basic-single"> 
 
        <option value="">Not Telling</option> 
 
        <option value="m">Male</option> 
 
        <option value="f">Female</option> 
 
       </select> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    </form>