Search code examples
cssintl-tel-input

Intl-tel-input: Make Country list dropdown width match the input field width

Can anyone help me how can I make the country list dropdown to always match the input field width?

enter image description here

Setting country list dropdown to 100% do not work. It should have 100% width of its grandparent. But, not sure how to achieve that.

It can be achieved by javascScript, but I need to do it using CSS only. The width of the dropdown and the input field should be same when input field width changes.

Here is the online jsfiddle demo url: http://jsfiddle.net/5num12gh/

HTML:

<input type="tel" id="phone">

jQuery:

$("#phone").intlTelInput();

Thanks,

Solution

  • You can change the position of the flagContainer to something other than absolute/relative so the dropdown doesn't position relative to it but to the div with the class .intl-tel-input which has the width of the input ( the only non absolute element inside it )

    And then with some CSS position the dropdown and the flag accordingly.

    Maybe there are other solutions like changing the dropdownContainer element as stated in the DOCs but not sure about that.

    Check below snippet or jsfiddle

    $("#phone").intlTelInput();
    .iti-flag {
  background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/10.0.2/img/flags.png");
}

body .intl-tel-input .flag-container {
  position: static;

}

body .intl-tel-input .selected-flag {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
}

body .intl-tel-input .country-list {
  width: 100%;
  top: 100%;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/10.0.2/js/intlTelInput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/10.0.2/js/utils.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/10.0.2/css/intlTelInput.css" rel="stylesheet"/>

<input type="tel" id="phone">