ngx-chips标签输入下拉列表在iPhone中不显示自动提示

时间:2019-07-02 02:35:43

标签: angular7 ngx-chips

我已经为电子邮件抄送字段实现了ngx-chips。它在使用Chrome的Android手机中完美运行。但是,在iPhone中,自动提示没有显示。

<div class="required form-group col-md-12 col-sm-12 col-xs-12" >
    <label class="control-label" for="email.emailCc">CC:</label>
       <tag-input [(ngModel)]="emailList"  [onlyFromAutocomplete]="true" theme='bootstrap'>
        <tag-input-dropdown [autocompleteObservable]="items" [showDropdownIfEmpty]="true" [dynamicUpdate]="false">
        </tag-input-dropdown>
       </tag-input>
 </div>

在iPhone中

enter image description here

在Android中

enter image description here

请帮助。

2 个答案:

答案 0 :(得分:1)

在global.scss中为IOS添加了以下行以显示下拉内容,

div.ng2-dropdown-menu.ng2-dropdown-menu---width--4.ng2-dropdown-menu--open {
  display: block !important; // to display the drop down content
  max-height: 40vh !important;  // for scrolling of suggestion list
}

但是仍然不如android上的好。滚动屏幕即可滚动列表。

答案 1 :(得分:0)

我们面临着同样的问题。问题不是显示数据,而是由于iPhone中文本框的缩放导致下拉列表的位置。借助CSS hack,我们能够将下拉列表放置在适当的位置。