CSS display Bug since v14.0.10

[m-dl]

Steps to reproduce

I just updated from v14.0.7 to v14.0.10+, and I noticed a bug in display (padding, and width). It seems to be since this commit, in v14.0.10 : here

Expected behaviour

This is what should be displayed as on previous versions : https://imgur.com/WCRv5N6

Actual behaviour

This is what is displayed, arrow is not well positionned, and when default number is set, there is no padding on the input : https://imgur.com/GXhw5Q4 https://imgur.com/YezBrIv

Initialisation options

Tested on Firefox 66, and Chrome 73.

Some screens of the CSS console : https://imgur.com/749dmaV https://imgur.com/dTB9ZPs https://imgur.com/5oPaCpF

this.intlPhone = intlTelInput($("#" + this.id)[0], {
                utilsScript: require("intl-tel-input/build/js/utils.js"),
                initialCountry: "auto",
                separateDialCode: true,
                nationalMode: true,
                formatOnDisplay: true,
                autoPlaceholder: "polite",
                preferredCountries: [],
                geoIpLookup(success, failure) {
                    $.get("https://ipinfo.io", function() {}, "jsonp").always(
                        function(resp) {
                            let countryCode =
                                resp && resp.country ? resp.country : "";
                            success(countryCode);
                        }
                    );
                }
            });

[crabnky]

+1

[malecki-se]

+1

[malecki-se]

@jackocnr The problem is probably with wrong build in npm, because this problem with spaces doesn't exist in this repo

[jackocnr]

Works for me: https://codepen.io/jackocnr/pen/mgBYXG (tested against the latest version)

I'm guessing this is a clash with your own custom CSS. If you can reproduce the issue in a codepen with the minimal code required then I'll be happy to take a look.

[malecki-se]

@jackocnr You can check it on: https://codesandbox.io/s/vjppprpzl0?from-embed

[jackocnr]

Ah you're totally right! We forgot to update the minified CSS file. If you switch to the unminified version then it works. Thanks for bringing this to my attention. Should be a simple case of re-building the CSS - I'd welcome a pull request to do this.

[jackocnr]

Fixed in v15.0.2, thanks again!

[crabnky]

I still can see the issue. After the form is loaded i can see that telephone input has inline style: padding-left: 6px, so it seems like selectedFlag.offsetWidth is 0. I added intl-tel-input to Symfony app, here is my code:

require('intl-tel-input/src/css/intlTelInput.scss');
require('intl-tel-input/build/js/intlTelInput-jquery');

jQuery(function () {

    let initCountries = function () {
        jQuery.get('/countries/list',
            function (data) {
                initIntlTelInput(data.countries, data.preferred);
            }
        );
    };

    let initIntlTelInput = function (localizedCountries, preferredCountries) {
        jQuery('input.intl-tel-input').intlTelInput({
            nationalMode: false,
            separateDialCode: true,
            initialCountry: 'auto',
            geoIpLookup: function (callback) {
                let geoData = Cookies.getJSON('geolocation');
                if (!geoData || !geoData.country_code2) {
                    jQuery.getJSON('https://api.ipgeolocation.io/ipgeo?apiKey=MYAPIKEY', function (data) {
                        geoData = data ? data : null;
                        Cookies.set('geolocation', geoData);
                    });
                }
                countryCode = (geoData && geoData.country_code2) ? geoData.country_code2 : 'de';
                callback(countryCode.toLowerCase());
            },
            localizedCountries: localizedCountries
            preferredCountries: preferredCountries.split(','),
            utilsScript: '/build/intl-tel-input/utils.js'
        });
    };
});

[jackocnr]

@crabnky are you sure you're using v15.0.2? And does it fix the issue if you switch to the unminified CSS file?

[crabnky]

@jackocnr yes, I'm using v15.0.2, see below from yarn.lock:

intl-tel-input@^15.0.1:
  version "15.0.2"
  resolved "https://registry.yarnpkg.com/intl-tel-input/-/intl-tel-input-15.0.2.tgz#75a3f5eaaf80de042373cb9575d7db9aa53c0ce5"
  integrity sha512-X2rjM7gWDiv2N3H00Zv30VwCxAI14iflQjNqLjcCQxRp3ldGz731xrjryNXcWMBjATBLfr5pSTZALtjxShQqOg==

Normally I use the source/scss file, but for test I switched to unminified css fileand nothing changed - the issue is still present.

See attached gif file - quality is not perfect, but you can see that initially the placeholder is under the dial code - if you change it, all is ok. Seems like initially the width of dial code div (selectedFlag) is not counted properly.

[jackocnr]

Looks fine to me: https://codepen.io/jackocnr/pen/ROmxNM

If you can find the minimal set of code that reproduces the problem and put that in a CodePen, then I'd be happy to take a look.

[bastianaf]

I still having this issue. I'm using the npm package v15.0.2 and the not min css file in laravel-mix. I solved it by not elegant way but functional, just add this script at the end:

$( document ).ready(function() { $("#phone").css("padding-left","87px") });

[mac89]

This issue is caused when the element is hidden when the plugin is initialized causing the offsetWidth to be 0.

My proposed solution is this:

var el = this.telInput;
while ((el = el.parentElement) && !el.classList.contains("intl-tel-input"));
var clone = el.cloneNode(true);
clone.style.visibility = "hidden";
document.body.appendChild(clone);

var selectedFlagClone = clone.getElementsByClassName("selected-flag").index(0);
var offsetWidth = selectedFlagClone ? selectedFlagClone.offsetWidth : 0;

// add 6px of padding after the grey selected-dial-code box, as this is what we use in the css
this.telInput.style.paddingLeft = "".concat(offsetWidth + 6, "px");

[jackocnr]

@mac89

This issue is caused when the element is hidden when the plugin is initialized causing the offsetWidth to be 0.

If you can find the minimal set of code that reproduces the problem and put that in a CodePen, then I'd be happy to take a look. Here is an example pen with the plugin up and running - feel free to fork this if it helps.

[mac89]

@mac89

This issue is caused when the element is hidden when the plugin is initialized causing the offsetWidth to be 0.

If you can find the minimal set of code that reproduces the problem and put that in a CodePen, then I'd be happy to take a look. Here is an example pen with the plugin up and running - feel free to fork this if it helps.

https://codepen.io/mac89/pen/gJJBLR

[jackocnr]

Thanks for that. Moving this to it's own issue: https://github.com/jackocnr/intl-tel-input/issues/909