I've been attempting to integrate intl-tel-input with bootstrap 4, but I'm facing an issue where the placeholder for the input is not showing up. I've tried various solutions found online, but none of them seem to work.
Here's 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.com/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.com/ajax/libs/intl-tel-input/12.0.3/img/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="47212b26203407753f69372920">[email protected]</a>");
}
}
And here's my JS code to initialize the plugin:
$("#phone").intlTelInput({
utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.0.3/js/utils.js",
allowDropdown: true
});
The only way I managed to see the placeholder was by using this CSS snippet:
#phone{
width:100%;
}
However, it doesn't fill the entire row as needed.
You can check out the JSFiddle example through this link.
Does anyone have any suggestions or workarounds for this problem?