Флаг с Intl-Tel-Input сдвигается вниз, когда присутствует ошибка div Parsley

Question

У меня есть небольшая, но уникальная ошибка, которую я не смог найти в другом месте. Под вводом номера телефона, имеющим intl-tel-input, появляется сообщение об ошибке, которое появляется из Parsley.js. Вот один без ошибок:

А вот один с ошибкой:

Как вы можете видеть, когда ДИВ ошибка присутствует, то флаг и стрелка смещаться вниз.

Вот соответствующий код:

<div class="col-md-6"> 
    <input type="tel" class="form-control tc-custom-focus" id="inf_field_Phone1" name="inf_field_Phone1" minlength = '10' maxlength="14" data-parsley-error-message='Must be minimum of 10 digits' data-parsley-trigger='change' data-parsley-required autofocus> 
    <input id="hidden-number" name='inf_field_Phone1' type="hidden" name="phone-full"> 
</div> 

<script> 
     $("#inf_field_Phone1").intlTelInput({ 
      utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/9.2.7/js/utils.js' 
     }); 
     $("#become-partner-form").submit(function() { 
      $("#hidden-number").val($("#inf_field_Phone1").intlTelInput("getNumber")); 
      // console.log($('#hidden-number').val()); 
     }); 
    </script> 

Оказывается, что размер div.selected-флаг меняется в размере до 38x55 от 38x36? Если есть какой-либо код, который я забыл включить, сообщите мне. Любая помощь приветствуется!

Answer 1

понял! добавлена ​​высота в .selected-flag как таковой:

.intl-tel-input.allow-dropdown .selected-flag, .intl-tel-input.separate-dial-code .selected-flag { 
height: 2em !important; 
}