Material Select not opening

  1. MDB Home Page
  2. Support Main Page
  3. MDB React
Topic: Material Select not opening

garrithsteyn pro asked 6 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 6 years ago

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

Anna Morawska staff commented 6 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 6 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.

garrithsteyn pro answered 6 years ago

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;
in 
.dropdown-content
class.   Cheers

Anna Morawska staff commented 6 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 6 years ago

This didn't solve my issue though

Anna Morawska staff answered 6 years ago

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
Write
Create snippet
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: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
garrithsteyn
Pro User
16Support score
10Questions 4Answers
0Snippets likes 0Snippets