CODEWITHSUNDEEP
angular
mikefolu
mikefolu

Reputation: 1333

Angular - Flag and width issue in ngx-intl-tel-input

In my Angular-11 project, I am using ngx-intl-tel-input:

<div class="form-group">
  <div class="input-group mb-3">
    <ngx-intl-tel-input [ngClass]="{ 'is-invalid': submitted && f.mobile_number.errors }" [cssClass]="'form-control mb-3'" [preferredCountries]="preferredCountries" [enableAutoCountrySelect]="true" [value]="'+91 0977667755'" [searchCountryFlag]="true" [selectFirstCountry]="false"
      [enablePlaceholder]="true" name="mobile_number" formControlName="mobile_number" [phoneValidation]="true" name="mobile_number" formControlName="mobile_number">
    </ngx-intl-tel-input>
    <div class="input-group-append">
      <div class="input-group-text"><i class="fa fa-phone"></i></div>
    </div>
    <div *ngIf="submitted && f.mobile_number.errors" class="invalid-feedback">
      <div *ngIf="f.mobile_number.errors.required">Mobile Number is required</div>
    </div>
  </div>
</div>

I observed two issues:

  1. The flags are grayed and not showing real flag.

  2. The width is shorter.

flag and width

angular.json:

        "styles": [
          "src/styles.scss"
        ],

style.scss:

@import '~bs-stepper/dist/css/bs-stepper.min.css';
@import '../node_modules/intl-tel-input/build/css/intlTelInput.css'

How do I get this resolved?

Thanks

Upvotes: 0

Views: 3685

Answers (3)

Hezy Ziv
Hezy Ziv

Reputation: 5558

try bootstrap version with out css or ngx-bootstrap https://github.com/webcat12345/ngx-intl-tel-input

https://www.npmjs.com/package/ngx-bs-tel-input

Upvotes: 0

Sherehime
Sherehime

Reputation: 11

I got flags after

npm install google-libphonenumber --save

about the width, take a look https://github.com/webcat12345/ngx-intl-tel-input/issues/234

maybe it can))

Upvotes: 1

Deepak Chandwani
Deepak Chandwani

Reputation: 36

I'm pretty sure this is a css issue. Can you confirm if you have linked the css file correctly in your angular.json ?

"styles": [
  "./node_modules/intl-tel-input/build/css/intlTelInput.css",
  "src/styles.css"
],

Upvotes: 0

Related Questions