please some help with this problem. I'm working with angular and try to make a modal within a form for assign user permissions.
I use bootstrap 3, angular 9 and ngx-mat-select-search library for multiple select. My problem is, I can't write in the input field: Buscar aplicaciones. My html code is this:
<mat-form-field color="accent">
<mat-select [formControl]="serverCtrl" placeholder="Search Application" [multiple]="true" #multiSelect>
<ngx-mat-select-search [showToggleAllCheckbox]="true" (toggleAll)="toggleSelectAll($event)"
[formControl]="controlMulti" placeholderLabel="Buscar aplicaciones" noEntriesFoundLabel="Sin resultados">
</ngx-mat-select-search>
<mat-option *ngFor="let app of appsFiltered | async" [value]="app">
{{app.code}} - {{app.name}}
</mat-option>
</mat-select>
CSS for show select component inner bootstrap modal.
/* Multi select fix modal */
.mat-select-panel {
z-index: 9999 !important
}
.cdk-global-overlay-wrapper {
z-index: 2000 !important;
}
.cdk-overlay-container {
z-index: 1900 !important;
}
.cdk-overlay-connected-position-bounding-box {
z-index: 10000 !important;
}
The multi-select component work fine in other parts of my app, the problem is with the modal. Thanks.