Topic: Select component inside modal
Hello MDB Community,
I want to use the new select component inside a modal. The dropdown is not working like accepted. Generally it's there and I can select the values with the mouse keys, but if I'm clicking with the mouse the dropdown isn't appearing.
Snippet
<button type="button" mdbBtn color="primary" class="relative waves-light" (click)="basicModal.show()" mdbWavesEffect>Launch demo modal</button>
<div mdbModal #basicModal="mdbModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="md-form">
<mdb-select-2 [multiple]="true" placeholder="Choose your option" label="Example label">
<mdb-select-option *ngFor="let option of options" [value]="option.value">{{ option.label }}</mdb-select-option>
</mdb-select-2>
</div>
</div>
<div class="modal-footer">
<button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close" (click)="basicModal.hide()" mdbWavesEffect>Close</button>
<button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>Save changes</button>
</div>
</div>
</div>
</div>
Thanks for helping.
sudip answered 5 years ago
I added .cdk-overlay-container{ z-index: 1090; } in styles.scss file . It fix the issue.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 9.3.0
- Device: PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No