Flags are not displayed correctly when using Salesforce LWC on Community page.

[kavitak722]

I have got a problem with the flags whereas they are not exactly cropped correctly and other country flags are partially shown as picture below shows:

This is how I implemented the Phone input component. I use the Lightning web component. However, this flag glitch occurs no matter what.

import { LightningElement } from 'lwc'; import flagTelpicker from '@salesforce/resourceUrl/flagTelpicker'; import { loadScript, loadStyle } from 'lightning/platformResourceLoader'; export default class Phoneflag extends LightningElement { datepickerInitialized = false; renderedCallback(){ if(this.datepickerInitialized){ return; } this.datepickerInitialized = true;

    Promise.all([
        loadStyle(this,flagTelpicker + '/css/demo.css'),
        loadStyle(this,flagTelpicker + '/css/intlTelInput.css'),
        loadScript(this, flagTelpicker + '/js/utils.js'),
        loadScript(this, flagTelpicker + '/js/intlTelInput.js')
    ]).then(() => {
        this.initFlagpicker();
    })
    .catch(error => {
        console.log(error);
    });
}
initFlagpicker(){
    const input = this.template.querySelector("[data-id=phone]");
    window.intlTelInput(input, {
        separateDialCode: true,
        // excludeCountries: ["il"],
        preferredCountries: ["us", "in"],
        initialCountry: "US",
    });

}
handleFieldChange(event){
    console.log(event.target.value);
}

}

I do appreciate the time and the help given to solve this problem!

[jackocnr]

If the flag icons are too small (the flags don't fill the height of the flag box), as appears to be the case in your screenshot, the only thing I can think of is that your custom CSS rules are conflicting with the plugin's e.g. you have a custom background-size rule that is overriding the plugin's rule.

If the flag icons are the right size (the flags do fill the height of the flag box), but appear cut off, or you see half of another flag as well, that usually means you're using flag images from an older version of the plugin - you need to make sure you update your flag images to match the version of the plugin that you're currently using (and make sure to update your caching strategy as well, if you have one, and empty the cache in your browser as well).

If you're still having problems after looking into these, then you will need to reproduce the issue in a codepen for me to debug it. Here is an example pen with the plugin up and running - feel free to fork this if it helps.

[jackocnr]

Closing due to inactivity.