mdb-select-2 not showing any values in dropdown


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

react123 premium asked 5 years 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 5 years ago

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


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


Sprintax pro premium answered 5 years 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 5 years ago

Could you also provide code of ts file?

Or, please provide to mi a working example.


Stefan Stefanov pro premium commented 5 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 5 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 ?


rhaouari answered 4 years 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 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?


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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