以角度更改 intl-tel-input 字段宽度

Posted 2023-05-09

【中文标题】以角度更改 intl-tel-input 字段宽度

【英文标题】：Change intl-tel-input field width in angular

【发布时间】：2021-04-10 06:37:01

【问题描述】：

我在我的 Angular 应用程序中使用了 Nebular ngx-admin template。还使用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类的宽度如下

.iti 
width:100%;

它运行良好。但我无法从样式文件中应用宽度属性，如下所示

在component.scss中

.iti 
  width: 100%;

【参考方案1】：

它终于为我工作了。我用过以下，

在component.scss中

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

原因

由于 Angular 中的样式封装，未应用样式。更多信息请参考this link。

【参考方案2】：

它对我有用。 我在component.css中添加了下面的代码

.iti--allow-dropdown 
  width: 100%;

【讨论】：

以前的答案在新版本中不起作用..不幸的是我无法删除！

这是最好的选择，因为在 .iti 上使用 width: 100% 会影响移动下拉菜单的行为。