jackocnr / intl-tel-input

A JavaScript plugin for entering and validating international telephone numbers. React and Vue components also included.
https://intl-tel-input.com
MIT License
7.64k stars 1.95k forks source link

CSS display Bug since v14.0.10 #885

Closed m-dl closed 5 years ago

m-dl commented 5 years ago

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 commented 5 years ago

+1

malecki-se commented 5 years ago

+1

malecki-se commented 5 years ago

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

jackocnr commented 5 years ago

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 commented 5 years ago

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

jackocnr commented 5 years ago

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 commented 5 years ago

Fixed in v15.0.2, thanks again!

crabnky commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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

20190430_015555

jackocnr commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

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