1

please some help with this problem. I'm working with angular and try to make a modal within a form for assign user permissions.

Form with the multiple select

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.

R. Richards
  • 24,603
  • 10
  • 64
  • 64
Jorge
  • 37
  • 1
  • 7
  • pls look at this link. i find solution here:https://stackoverflow.com/questions/48352238/why-mat-select-not-working-inside-the-modal-onclick-it-shows-options-behind-th – Ali May 25 '21 at 18:58

0 Answers0