CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap
Henri
Henri

Reputation: 147

Bootstrap:why intlTelinput changes the width of the input element?

I would like to put a number phone input in a subscription form with the validation made by the intlTelInput library, here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


  <link rel="stylesheet" type="text/css" href="flags.min.css">
  <link rel="stylesheet" type="text/css" href="css2.css">
  <link rel="stylesheet" type="text/css" href="bootstrap-social.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <link rel="stylesheet" href="build/css/intlTelInput.css">
  <script src="google/jquery-1.11.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


</head>

<div class="container">

  <div class="row flex-grow">


    <div class="col-xs-offset-1 col-xs-10 col-lg-12 col-lg-offset-0">


      <div class="row" id="grad1">
      <br>

          <div class="col-xs-offset-1 col-xs-10 col-lg-offset-4 col-lg-4">

                <form method="post" action="serv2.php" onsubmit="return submitForm(this);">

                  <fieldset>

                    <div class="row">


                        <div class="form-group phone">

                            <input type="tel" class="form-control" id="phone" name="phone" placeholder="Phone number" />
                       </div>

                        <div class="form-group country">
                            <input type="text" id="country" name="country" class="form-control" placeholder="Country" />
                        </div>


                          <div class="form-group col-lg-6 col-lg-offset-3">
                            <div>
                              <label for="bouton"><br></label>
                              <div>
                                <button type="submit" class="btn btn-default" style="background-color: #00B0F0; color:white; width: 100%;border:none;">Valider</button>
                              </div>
                            </div>
                          </div>


                    </div>

                  </fieldset>

                </form>
            </div>

      </div>


    </div>

  </div>

</div>

</html>

</body>

<script src="build/js/intlTelInput.min.js"></script>

<script>


  $("#phone").intlTelInput({

    initialCountry: "auto",
    geoIpLookup: function(callback) {
      $.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
        var countryCode = (resp && resp.country) ? resp.country : "";
        callback(countryCode);
      });
    },
    utilsScript: "build/js/utils.js"
  });




  var telInput = $("#phone"),
  errorMsg = $("#error-msg"),
  validMsg = $("#valid-msg");

  telInput.intlTelInput({
    utilsScript: "build/js/utils.js"
  });

</script>

The problem is that the phone input does not take the full width of the form like the country does.

I have tried to change it with document.getElementById('phone').style.minWidth = 100%; but it remove the action of the intlTelInput library (i.e no more flag icon).

Any idea ?

Thank you

Upvotes: 8

Views: 9180

Answers (7)

Cornelius
Cornelius

Reputation: 1

I just encountered the width problem 17/09/2022

.intl-tel-input
{
    width: 100%;
}
.iti {
    width: 100%;
}

These two lines must fix the failure to adjust the input with intltelinput-changes-the-width-of-the-input-element

Upvotes: 0

Dorian
Dorian

Reputation: 9085

Using postcss and doing import "./phones.css" in my application.postcss.css with phones.css being:

@import "intl-tel-input/build/css/intlTelInput.css";

.iti {
  display: block;
}
phone input full width

Upvotes: 2

Lakindu Hewawasam
Lakindu Hewawasam

Reputation: 750

Go to the intlTelInput.min.css file and paste these two classes.

.intl-tel-input{
  width: 100%;
}
    
.iti {
  width: 100%;
}

Upvotes: 1

Kamil Kafoor
Kamil Kafoor

Reputation: 306

So i was recently adding this to my Angular project using the package ng2TelInput. So i found the same problem where my CSS was not been able to change and was stuck.

Even though if you add .iti { width: 100%; } in your CSS class, this wouldn't work, as mentioned in the documentation. You have to go to the following path(Make sure the you follow the path exactly):

node_modules/intl-tel-input/build/css/intlTelInput.css

And add the following code there and then it works.

.iti {
  width: 100%;
  display: block;
}

Upvotes: 8

Henri
Henri

Reputation: 147

Ok, I eventually found the answer, It was in the documentation, one just have to add the class to the container:

.intl-tel-input {
  width: 100%;
}

Upvotes: 3

olu mide
olu mide

Reputation: 327

.iti.iti--allow-dropdown { width: 100% }

This works when intl-tel-input is used in a Bootstrap form group/form-control for example:

<div class="form-group">
    <label class="form-label" for="phone">Phone</label>
    <input type="tel" class="form-control form-control-lg" id="phone">
</div>

Upvotes: 0

Wale
Wale

Reputation: 109

add this to your css code

.intl-tel-input{
  width: 100%;
}

Upvotes: 2

Related Questions