Topic: mdb-select-2 not showing any values in dropdown
Expected behavior List values in dropdown Actual behavior Not listing values in dropdown
Resources (screenshots, code snippets etc.)
options = [ { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }, ];
{{ option.label }}
hello, is there anything new on solving the problem of mdb-select-2 on mdb-modal, thank you
Same problem here. Here is a code example (for my case):
<div class="md-form" *ngIf="countries | async as countries">
<mdb-select-2 placeholder="Country code">
<mdb-select-option *ngFor="let country of countries" [value]="country.phoneCode">{{ country.isoName }} ( {{country.phoneCode}} )</mdb-select-option>
</mdb-select-2>
</div>
The dropdown doesn't even open.
Konrad Stępień staff commented 4 years ago
Could you also provide code of ts file?
Or, please provide to mi a working example.
Stefan Stefanov pro premium commented 4 years ago
I found something. Currently, I'm using mdb-select-2 in mdbModal and it doesn't work, but when I extract mdb-select-2 and paste it in normal component everything is fine (it's working properly).
Arkadiusz Idzikowski staff commented 4 years ago
Thanks, we will try to debug that using modals.
fellah pro commented 4 years ago
Hi Arek
how's the investigation going? I'm facing the same problem, the select doesn't open within a modal
Arkadiusz Idzikowski staff commented 4 years ago
This issue is still not resolved, we will update this thread when we will find a workaround or add a fix.
rhaouari commented 4 years ago
Hi , my mdb pro license expired a few days ago , if this issue is fixed , in a newer version, will i be able to get the update ?
actually the dropdown works but its hidden by the cdk-overlay-container div i added this to styles.scss and it seems to resolve the problem
.cdk-overlay-container { z-index: 1050 !important; } i m not a css fan , i don't know if the solution is adequate , but did'nt see any regression in my app after modifying the scss.
Arkadiusz Idzikowski staff commented 4 years ago
We need to adjust z-indexes of some elements to achieve the same effect, so this solution might be correct, but we need to check if it doesn't break anything in other components.
soumadeep commented 4 years ago
Hi Arkadiusz
Any updates on this?
Arkadiusz Idzikowski staff commented 4 years ago
@soumadeep We added fix in v9.4.0. Do you use this (or newer) version and still have the same problem? Do you also use select inside a modal component?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 9.3.1
- Device: PC
- Browser: Firefox
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 4 years ago
Please provide the html code that you used to render the component. Does the dropdown open correctly?