search

jackocnr / intl-tel-input

A JavaScript plugin for entering and validating international telephone numbers. Now includes React and Vue components.
https://intl-tel-input.com
MIT License
7.57k stars 1.94k forks source link

Using Intl-Tel-Input with bootstrap 3's large input class input-group-lg in form. #953

Closed akshayp660 closed 5 years ago

akshayp660 commented 5 years ago

Steps to reproduce

  1. problem 1 occurs due to 2 reasons integration of tel-input puts div wrapper around <input type"tel"> and display property of intlTellInput.css. Reason 1: break bootstraps one CSS rule. bootstrap.css rule default: .input-group-lg > .form-control, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .btn { height: 46px; padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 6px; } when adding tel-input to code just edit bootstrap.css to .input-group-lg > .form-control, //for other simple input .input-group-lg >.iti> .form-control //for itnl-tel-input. this makes rule for wrapper so that default rule is also applied to wrapper. .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .btn { height: 46px; padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 6px; } Reason 2 display property of class (.iti) is inline-block. solution is to delete or edit .iti class in intltelinput.css you delete display:inline-block or add other value.

  2. problem 2 and 3 occers due to
    Z-index of .itiselected-flag , .iticountry-list class in intltelinput.css solution is to set it to >=4

  3. adding left padding to input tag so that it won't go underneath the flag container like this: input padding-left or use option: separateDialCode: true,

Expected behavior

Integrated tel-input should fit properly and its behavior should be as per standard. Contact form

Actual behavior

I am using bootstrap 3 for my project. since I am using bootstrap's large input (.input-group-lg) class in my contact form. but when I tried to integrate intl-tel-input. it was not able to fit well as you can see in uploaded screenshots. Problem 1: did not occupy proper height. Problem 1

Problem 2: flag box sims to disappear when focused on input. problem 2

Problem 3: drop-down seems to be underneath other input options. Problem 3

Initialisation options

List any options you're using e.g. bootstrap.js, IP lookup, validate.

jackocnr commented 5 years ago

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.

jackocnr commented 5 years ago

Closing due to inactivity.