mdb-select-2 not showing any values in dropdown


Topic: mdb-select-2 not showing any values in dropdown

react123 premium asked 11 months ago

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 }}

Arkadiusz Idzikowski staff commented 11 months ago

Please provide the html code that you used to render the component. Does the dropdown open correctly?


rachad malek answered 10 months ago

hello, is there anything new on solving the problem of mdb-select-2 on mdb-modal, thank you


Sprintax pro premium answered 11 months ago

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 11 months ago

Could you also provide code of ts file?

Or, please provide to mi a working example.


Stefan Stefanov pro premium commented 11 months 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 11 months ago

Thanks, we will try to debug that using modals.


fellah pro commented 10 months 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 10 months ago

This issue is still not resolved, we will update this thread when we will find a workaround or add a fix.


rhaouari commented 10 months 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 ?


rhaouari answered 10 months ago

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 9 months 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 pro premium commented 2 weeks ago

Hi Arkadiusz

Any updates on this?


Arkadiusz Idzikowski staff commented 2 weeks 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?


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: Angular
  • MDB Version: 9.3.1
  • Device: PC
  • Browser: Firefox
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No