Autocomplete visualization in modal

Dear bitjuice,

Could you please provide me with the code which you're using and which causes you those problems?

I have tried to reproduce it with 7.4.3 but without success. There's no such problem.

Best Regards,

Damian

Hi Damian,

this is the code:

<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close pull-right" aria-label="Close" (click)="CloseModal()">
      <span aria-hidden="true">×</span>
    </button>
    <h4 class="modal-title w-100" id="myModalLabel"><i class="mr-2" [ngClass]="icon"></i>{{heading}}</h4>
  </div>
  <div class="modal-body">
    <div class="container-fluid">
    <div class="row">
  <div *ngIf="showSearchIcon" class="col-1 d-flex align-items-center text-center">
    <span class="input-group-text" style="background-color: transparent; border:none; color:white">
      <i class="fas fa-search" style="margin-top: 1rem; font-size:1.5rem"></i>
    </span>
  </div>
  <div [className]="showSearchIcon ? 'col-11' : 'col-12'">
    <div class="md-form" [ngClass]="{'my-0': nomargin}">
      <span *ngIf="label!=''">{{label}}</span>
      <input type="text" class="completer-input form-control mdb-autocomplete mb-0 white-text font-size-big"
        [class.white-text]="whitetext" [class.font-size-big]="bigfont" [(ngModel)]="searchText" (ngModelChange)="search()"
        [mdbAutoCompleter]="entytybynameauto" placeholder="">
      <mdb-auto-completer #entytybynameauto="mdbAutoCompleter" textNoResults="I have found no results :(">
        <mdb-option *ngFor="let option of results$ | async; let i = index;" [value]="option.name" (mousedown)="onEntitySelect(option)">
          <div class="w-100">
            <div class="media d-block d-md-flex" style="color: #111">
              <img class="d-flex rounded-circle avatar z-depth-1-half mb-3 mx-auto" [src]="option.profilePictureUrl"
                style="max-width: 60px" alt="{{option.name}}">
              <div class="media-body text-center text-md-left ml-md-3 ml-0">
                <h5 class="mt-0 font-weight-bold blue-text mb-1">{{option.name}}</h5>
                <p class="font-italic mt-0">{{option.description}}</p>
                <small>{{option.city.name}} ({{option.city.adminSecondArea}})</small>
              </div>
            </div>
          </div>
        </mdb-option>
      </mdb-auto-completer>
    </div>
  </div>
</div>
    </div>
    <div class="modal-footer">
      <button type="button" mdbBtn color="secondary" class="waves-light rounded" aria-label="Close" (click)="CloseModal()"
        mdbWavesEffect><i class="fas fa-times mr-2"></i>Annulla</button>
      <button type="button" mdbBtn color="primary" class="relative waves-light rounded" mdbWavesEffect (click)="Save()"
        [disabled]="CheckDisabledSaveButton()"><i class="fas fa-save mr-1"></i>Salva</button>
    </div>
  </div>
</div>

Is there a way to disable automatic hiding of autocompleter dropdown, so I can use Chrome DevTools to edit dropdown css?

Dear bitjuice,

I need the typescript source code because there are so many variables in the modal template.

Please provide me with the full code (HTML and TS) because I won't be able to debug your problem without it.

About hiding autocompleter dropdown - unfortunately, there's no such possibility to turn off the hiding functionality.

Best Regards,

Damian

Hi Damian,

sorry but the source code is very complex.

I try to give you another clue that I recently discovered: the problem occurs if I scroll the main page under the popup. If I don't scroll main page, the dropdownlist is shown correctly

No scrolled page

Scrolled page

I hope this additional information can help you to detect the problem.

Thanks

Marco

Dear Marco,

Thank you for additional information, we managed to reproduce this problem. It should be fixed in near future, but I can't provide an ETA yet.