How to specific customize the country list

  • Resolved ssjkido

    (@ssjkido)


    4 years, 11 months ago

    Hi,
    I have a couple of questions please.

    A. Is it ok to customize the plugin? We need to remove some countries from the list.

    B. If it’s ok, then here’s what I’m having a problem with:

    1. I’ve deleted some of the countries, because right now we don’t serve globally. (deleted the countries from ../js/countries.json)

    *2. For some countries, we’d need to change the country code to serve a specific range of phone numbers rather than all.
    For example, for US numbers, the country code is (+1), we need to change it to (i.e: +1 762).
    Now I’ve achieved that by editing ../public/js/country-code-selector-public.js
    But now the problem is, the block which shows the country code is too small to fit the country code + the range, so now the code is appearing like this:

    +xxx
    xxx

    instead of: +xxx xxx

    Through Inspect Element, it seems like the width for the block containing the country code is 46px, but I looked at every css file and I couldn’t find this number!
    Could you please point me in the right direction to change it?

    *3. Is it possible to remove the flag?

    Thanks.

    • This topic was modified 4 years, 11 months ago by ssjkido. Reason: Formatting
    • This topic was modified 4 years, 11 months ago by ssjkido.
Viewing 1 replies (of 1 total)
  • Plugin Author intolap

    (@intolap)

    4 years, 8 months ago

    Hey,

    1. You could have done this from the plugin settings selecting the countries you want to show on the selector.

    2. There is no width set by the plugin on the phone field to which the selector is attached. Maybe this field is getting the width from the theme or a plugin on your website. This plugin set padding-left to this text field to push the text to the end of the selector box and this is done by the plugin JavaScript dynamically based on the length of the content inside the container DIV after selection. There seems no need for any extra coding as this setting is done dynamically based on your code length.

    If you still having this issue please contact us at support@intolap.com for paid technical support.

    3. You can add this css to your child theme’s style.css file.

    .iti-flag {width: 0;} //hide the flag and it’s container.

    Note: It is not recommended to change the plugin’s code at all as when the plugin updates, the changes will be lost.

    • This reply was modified 4 years, 8 months ago by intolap.
Viewing 1 replies (of 1 total)

The topic ‘How to specific customize the country list’ is closed to new replies.