Topic: MDBSelect not working!!
I'm using MDBReact 4.8.7 PRO and I have to use the MDBSelect component in production project, but I have found it was not working properly. While in the demos the .dropdown-content is shown with js and inline styles, in the version you guys have sent me, the .dropdown-content is shown via .fadeElement class which has display: block, but unfortunatelly the .dropdown-content class overwrites it and the Select wont show anymore.
It is very important to hotfix this issue ASAP.
Hey had the same problem make sure you import css/addons-pro/
As you can see in the docs page, Material Select is a premium component which isn't available in MDB React Free
Ivan Ivanov commented 6 years ago
Hi Bartolomiej, thanks for getting in touch.
Yes, I'm aware of the fact the Select is Premium, that's why I started with "I'm using MDBReact PRO". Our company just bought team license a day or two ago. But that does not solve the issue. We bought it for important project and we are a bit dissapointed to find that some of the components are not working and there isnt even sourse files for the library, so we cannot even fix them ourselves.
Ivan Ivanov commented 6 years ago
Btw here's order refference #83970 2019-01-08 13:02:59
Please check if in index.js file you import styles in the correct order:
import 'font-awesome/css/font-awesome.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';
import App from './App';
Ivan Ivanov commented 6 years ago
Hi, Anna!
The css files are in the same order as in your example. The conflicting styles are located in the js files of MDBReact itself. They're generated via js.
Could you provide us with more information? Are there any errors in the console? Do you use create-react-app config or custom configuration? Also, please paste in here your code.
Best,
Ania
Ivan Ivanov commented 6 years ago
Hello Ania :)
I there are no errors in the console, just conflicting styles. We're using create-react-app as boilerplate. I just noticed another symptom - when we deployed our app, the select works but only when we run yarn build. If we run it in the development server (yarn start or npm run start) that's when the select fails to work properly. Unfortunatelly I dont have permission to share any code snippet, but I'm pretty sure it has noting to do with it, since we tried the exact examples from the docs.
I hope that would provide more clues for a proper fix of this issue :)
Kind regards,
Ivan.
Well, it's strange. I've just tested out our code snippets provided in our docs and everything works fine. For a starter maybe try to remove the whole node_modules folder and install all over again using your custom gitlab+token URL.
Secondly, do other components work fine?
Do you have all styles import in the main, root, entry file? It's important; I've noticed the behaviour you described ( "works in the production mode, doesn't in development") when I moved styles imports one level down in the file's structure. So, your index.js file should look more or less like shown below, and stylesheets should be imported only in this file.
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import 'font-awesome/css/font-awesome.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<Router><App /></Router> , document.getElementById('root'));
registerServiceWorker();
I hope the above is useful to you.
Best,
Ania
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.8.4
- Device: Laptop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No