Material Select not opening

Topic: Material Select not opening

garrithsteyn pro asked 5 years ago

Hi I have taken the Material Select directly from the example, but it does not open/dropdown when I click on it. Any idea why this could be happening and how to fix it? <Select> <SelectInput selected="Choose your option"></SelectInput> <SelectOptions> <SelectOption disabled>Choose your option</SelectOption> <SelectOption>Option nr 1</SelectOption> <SelectOption>Option nr 2</SelectOption> <SelectOption>Option nr 3</SelectOption> <SelectOption>Option nr 4</SelectOption> <SelectOption>Option nr 5</SelectOption> </SelectOptions> </Select>

Jakub Królak pro commented 5 years ago

I'm having the same issue, please help :)

Anna Morawska staff commented 5 years ago

Hi, thank you for reporting this. I've tried to recreate this situation and it looks like everything works fine. Please, make sure you have the latest MDB React Pro version. It should fix the problem. If not, please let us know which browser you use, and are there any console warnings or errors. Best, Anna

garrithsteyn pro commented 5 years ago

Hi Anna 1. Created a clean react app using `create-react-app`. 2. Added mdbreact dependency to package.json using "mdbreact": "git+https://oauth2:TOKEN@git.mdbootstrap.com/mdb/react/re-pro.git". 3. Imported font-awesome, bootstrap and mdb style sheets under index.js. 4. Imported `import { Select, SelectInput, SelectOption, SelectOptions } from 'mdbreact';` under App.js 5. Added sample Material Select as posted in original post above. 6. Tested in Chrome, Firefox and Edge. It doesn't work in any of the browsers and no console warnings appear.

Add comment

Anna Morawska staff answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

Hi Jakub, I've checked again and our Select works fine ;) Maybe check out your import statements in index.js file. They have to be placed in correct order. (style files have to be imported before the App.js file)

import React from 'react';

import ReactDOM from 'react-dom';

import 'font-awesome/css/font-awesome.min.css';

import 'bootstrap/dist/css/bootstrap.min.css';

import './index.css';

import 'mdbreact/dist/css/mdb.css';

import App from './App';

Is this solves your problem?

Best,

Ania

Add comment

garrithsteyn pro answered 5 years ago

2 0 Best answer

Since mdb support is sleeping, I found a fix for this problem. Thanks to @glockwood for finding the workaround. If you edit node_modules/mdbreact/dist/css/mdb.css, line 9591 Remove

display: none;

.dropdown-content

class. Cheers

Anna Morawska staff commented 5 years ago

Hi garrithsteyn, thank you for posting your solution. It's strange, I've just tested it again, and on my environment, it works perfectly fine. We will take a closer look at this in the next sprint. Best, Ania

Jakub Królak pro commented 5 years ago

This didn't solve my issue though

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: Pro
Premium support: No
Technology: MDB React
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

garrithsteyn

Pro User 16Support score
10Questions 4Answers 0Snippets