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.

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

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,

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