javascript - Bootstrap 4 + Intl-Tel-Input Workaround - Stack Overflow

admin管理员组

文章数量:1415120

I am trying to use the intl-tel-input with bootstrap 4. However, I am not able to see the placeholder for the input at all. I tried almost all the solution available on the net on this matter but unfortunately, none worked.

This is my HTML

<div class="form-row">
  <div class="form-group col-sm-12">
    <label for="quote-phone" class="sr-only">Mobile Number</label>
    <div class="input-group input-group-lg">
      <input id="phone" type="tel" class="form-control" placeholder="Phone Number">
      <div class="invalid-feedback">
        Please provide a phone number.
      </div>
    </div>
  </div>
</div>

This is my CSS

  .iti-flag {
    background-image: url(".0.3/img/flags.png");
  }

  @media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min--moz-device-pixel-ratio: 2),
  only screen and (-o-min-device-pixel-ratio: 2 / 1),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 192dpi),
  only screen and (min-resolution: 2dppx) {
    .iti-flag {
      background-image: url(".0.3/img/[email protected]");
    }
  }

And my JS to initialize the plugin:

$("#phone").intlTelInput({
  utilsScript: ".0.3/js/utils.js",
  allowDropdown: true
});

The only time I get to see the placeholder is when I do this:

#phone{
width:100%;
}

But it still doesn't cover the whole row obviously.

Here is the JSFiddle link.

Any workarounds to this problem?

I am trying to use the intl-tel-input with bootstrap 4. However, I am not able to see the placeholder for the input at all. I tried almost all the solution available on the net on this matter but unfortunately, none worked.

This is my HTML

<div class="form-row">
  <div class="form-group col-sm-12">
    <label for="quote-phone" class="sr-only">Mobile Number</label>
    <div class="input-group input-group-lg">
      <input id="phone" type="tel" class="form-control" placeholder="Phone Number">
      <div class="invalid-feedback">
        Please provide a phone number.
      </div>
    </div>
  </div>
</div>

This is my CSS

  .iti-flag {
    background-image: url("https://cdnjs.cloudflare./ajax/libs/intl-tel-input/12.0.3/img/flags.png");
  }

  @media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min--moz-device-pixel-ratio: 2),
  only screen and (-o-min-device-pixel-ratio: 2 / 1),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 192dpi),
  only screen and (min-resolution: 2dppx) {
    .iti-flag {
      background-image: url("https://cdnjs.cloudflare./ajax/libs/intl-tel-input/12.0.3/img/[email protected]");
    }
  }

And my JS to initialize the plugin:

$("#phone").intlTelInput({
  utilsScript: "https://cdnjs.cloudflare./ajax/libs/intl-tel-input/12.0.3/js/utils.js",
  allowDropdown: true
});

The only time I get to see the placeholder is when I do this:

#phone{
width:100%;
}

But it still doesn't cover the whole row obviously.

Here is the JSFiddle link.

Any workarounds to this problem?

• javascript
• html
• css
• bootstrap-4
• intl-tel-input

Share Improve this question Follow asked Sep 11, 2017 at 18:42 Kamil KamiliKamil Kamili 1,92755 gold badges2525 silver badges3939 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

It's because this class is making your input at 1% width:

.input-group .form-control, .intl-tel-input { width: 100%; }

If you overwrite that file, then you can see it.

.iti{ width: 100%;}

this works for me

if you are not using input-group or form-control just add below property

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

本文标签： javascriptBootstrap 4IntlTelInput WorkaroundStack Overflow