mdb-select-2 not showing any values in dropdown

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

react123 premium asked 4 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' }, ];

Arkadiusz Idzikowski staff commented 4 years ago

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

Add comment

rhaouari free answered 4 years ago

0 0 Best answer

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 free commented 3 years ago

Hi Arkadiusz

Any updates on this?

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

Add comment

rachad malek free answered 4 years ago

2 0 Best answer

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

Add comment

Stefan Stefanov premium answered 4 years ago

0 0 Best answer

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 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 free 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 ?

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Premium
Premium support: Yes
Technology: MDB Angular
MDB Version: 9.3.1
Device: PC
Browser: Firefox
OS: Windows 10
Provided sample code: No
Provided link: No

react123

Premium support 35Support score
3Questions 2Answers 0Snippets