![](/img/trans.png)
[英]How to use intl-tel-input plugin utilsscript in angular 2+ Project?
[英]Change intl-tel-input field width in angular
我在 angular 應用程序中使用了Nebular ngx-admin 模板。 還使用ng2-tel-input進行手機號碼輸入。 我有以下 HTML 代碼
<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>
但是在構建 Angular 應用程序之后。 它看起來像下面的代碼。 我是通過瀏覽器中的開發者工具找到的
問題:
無法像上圖所示的其他字段一樣更改輸入字段的寬度。
試過了
我已經直接在開發人員工具中更改了iti class 的寬度,如下所示
.iti {
width:100%;
}
它運作良好。 但我不能從 styles 文件中應用寬度屬性,如下所示
在組件.scss
.iti {
width: 100%;
}
它終於為我工作了。 我用過以下,
在組件.scss
:host ::ng-deep .iti {
width: 100%;
}
這樣做的原因
由於 angular 中的樣式封裝,未應用樣式。 有關更多信息,請參閱此鏈接。
它對我有用。 我在component.css中添加了下面的代碼
.iti--allow-dropdown {
width: 100%;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.