Flag with Intl-Tel-Input shifts down when Parsley error div is present

Question

I've got a small but unique error that I've been unable to find elsewhere. Underneath the phone number input that has intl-tel-input is an error message that pops up from Parsley.js. Here is one without the error:

And here is one with the error:

As you can see, when the error div is present, the flag and arrow shift down.

Here's the relevant code:

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

It appears that the size of div.selected-flag is changing in size to 38x55 from 38x36? If there's any code I forgot to include, please let me know. Any help would be much appreciated!

score 4 · Answer 1 · answered Dec 09 '16 at 23:07

4

figured it out! added a height to .selected-flag as such:

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

answered Dec 09 '16 at 23:07

J. Jackson

3,326
8
34
74

In the new version is like that .iti__selected-flag { height: 3.5em !important; }, for anyone sharing this issue. – Iskren May 26 '22 at 19:19

score 0 · Answer 2 · edited Nov 02 '19 at 08:35

0

.iti__selected-flag{ display: block ruby !important; }

edited Nov 02 '19 at 08:35

slfan

8,950
115
65
78

answered Nov 02 '19 at 08:19

khush mohammad

38
6

1

Please don't post only code as an answer, but include an explanation what your code does and how it solves the problem of the question. Answers with an explanation are generally of higher quality, and are more likely to attract upvotes. – Mark Rotteveel Nov 03 '19 at 08:35

Flag with Intl-Tel-Input shifts down when Parsley error div is present

2 Answers2