angularintl-tel-input

Change intl-tel-input field width in angular

I have using the Nebular ngx-admin template in my angular application. Also using ng2-tel-input for mobile number input. I am having the below HTML code

<div class="form-control-group">
          <label class="label" for="input-mobile">Mobile<span class="text-danger"> *</span></label>
          <input nbInput type="text" id="input-mobile" class="input-mobile" name="mobile" placeholder="Mobile" fullWidth fieldSize="large" formControlName="mobile" inputmode="numeric" digitOnly [status]="status(formcontrols.mobile)"
            ng2TelInput [ng2TelInputOptions]="{initialCountry: 'in'}">
</div>

but after building the Angular application. it looks like the below code. I found it by developer tools in the browser

enter image description here

Issue:

Unable to change the width of the input field like other fields shown in the above picture.

Tried

I have changed the width of the iti class directly in the developer tools like below

.iti {
width:100%;
}

It is working well. But I can't apply width property from styles file like below

in component.scss

.iti {
  width: 100%;
}
Solution

  • It is worked finally for me. I have used the following,

    in component.scss

    :host ::ng-deep .iti {
  width: 100%;
}

    Reason for this

    Style is not applied due to style encapsulation in angular. Refer to this link for more.