Uso ng-select en mi sitio, pero la lista desplegable se coloca detrás del modal cuando la página se carga por primera vez. Sin embargo, si vuelvo a cargar la página, la lista se coloca correctamente esta vez. Yo uso Angular 8.

 <ng-select #selectSociety notFoundText="Aucun résultat" [items]="allOptions !== undefined ? allOptions : (societiesObs | async)" [loading]="societiesLoading" loadingText='Chargement...' [minTermLength]="2" bindLabel="name" bindValue="id" placeholder="Société" typeToSearchText="Entrez au moins 2 caractères" [typeahead]="societiesInput" formControlName="society_id" class="society quotation edit-select"> <ng-template ng-footer-tmp> <div class="create-new" (click)="createSociety()"> Ajouter une entreprise </div> </ng-template> <ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm"> {{item.name}} </ng-template> </ng-select>

y css de ng-select.

 .ng-select-wrapper { margin-bottom: 0; position: relative; } .ng-select { padding-bottom: 0; margin-bottom: 1.25em; .ng-select-container { .ng-value-container { align-self: center; } } .ng-arrow-wrapper { .ng-arrow { border-width: 4px 4px 2.5px; } } } .ng-select.billing .ng-select-container { background-color: #f0f9fe; border: none; } .ng-select.quotation .ng-select-container { background-color: #f0f9fe; border: none; &:hover { background-color: #cbf0ff; } } .ng-dropdown-panel { z-index: 3000 !important; .ng-dropdown-footer { cursor: pointer; &:hover { background-color: #f0f9fe; } } } .ng-select.edit-select { .ng-option { i { display: none; &:hover { color: $secondary; } } &:hover { i { display: block; } } }

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

No sé cómo resolver este problema.