ngx-chips tag-input-dropdown does not show autosuggest in iPhone

Question

I have implemented ngx-chips for an email CC field. It works perfectly in my Android phone using Chrome. But, in iPhone, the autosuggestion does not show up.

<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>

In Iphone

In Android

Please help.

score 2 · Accepted Answer · answered Jul 16 '19 at 09:45

2

Added following line in global.scss for IOS to show dropdown content,

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
}

But still it is not good as it is on android. Scrolling the screen scrolls the list with it.

answered Jul 16 '19 at 09:45

Abhijeet Farakate

639
7
9

They have opened issue regarding safari, So I think it will be fixed in coming version till then we can use it like this – Abhijeet Farakate Jul 19 '19 at 10:10

Nayana Setty · Answer 2 · 2019-07-10T09:14:54.370

0

We were facing the same issue. The problem is not data showing up, rather the placement of the dropdown due to the Zoom of textbox in IPhone. With css hacks we were able to place the drop down in proper position.

edited Jul 10 '19 at 09:14

answered Jul 10 '19 at 07:04

Nayana Setty

1,001
1
12
34

Nayana, could you please mention those css hacks? I tried many to no avail and finally gave up on this autocomplete. – RiyaGeorge Jul 10 '19 at 08:21

ngx-chips tag-input-dropdown does not show autosuggest in iPhone

2 Answers2

Linked