在 angular 中更改国际电话输入字段宽度
Change intl-tel-input field width in angular
我使用Nebular ngx-admin template in my angular application. Also using 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%;
}
它运行良好。但是我不能像下面这样从样式文件中应用宽度 属性
在component.scss
.iti {
width: 100%;
}
终于为我工作了。我使用了以下,
在component.scss
:host ::ng-deep .iti {
width: 100%;
}
原因
由于 angular 中的样式封装,未应用样式。参考this link了解更多。
对我有用。
我在 component.css
中添加了下面的代码
.iti--allow-dropdown {
width: 100%;
}
我使用Nebular ngx-admin template in my angular application. Also using 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%;
}
它运行良好。但是我不能像下面这样从样式文件中应用宽度 属性
在component.scss
.iti {
width: 100%;
}
终于为我工作了。我使用了以下,
在component.scss
:host ::ng-deep .iti {
width: 100%;
}
原因
由于 angular 中的样式封装,未应用样式。参考this link了解更多。
对我有用。 我在 component.css
中添加了下面的代码.iti--allow-dropdown {
width: 100%;
}