Topic: MDB Inputs not working
Expected behavior
MDB Inputs respond and are clickable, drop-downs work, etc. I have used MDB on several React projects this year, but this is the first time I have seen this behavior.
Actual behavior
None of the MDB Inputs are working. But when I comment out the mdb.css file, the inputs do work.
Resources (screenshots, code snippets etc.)
When I look at the HTML code using Chrome Dev Tools, I see that when I click on an MDB Select menu, classes are being added to the item, to show the drop down. But the drop downs are not visible. Same with other inputs - checkboxes etc.
None of the inputs are working, but here is one code sample for reference:
<MDBSelect>
<MDBSelectInput />
<MDBSelectOptions>
<MDBSelectOption key="1" value="1">1</MDBSelectOption>
<MDBSelectOption key="2" value="2">2</MDBSelectOption>
<MDBSelectOption key="3" value="3">3</MDBSelectOption>
</MDBSelectOptions>
</MDBSelect>
Hi,
It's difficult to find out what causes that behaviour. I tried to run this code with different versions of MDBReact but there were no problems.
You say that classes were added after clicking on the Select, so maybe you have your different classes which override classes from mdb.css file.
What version of MDBReact do you use? Can you try to check if it works with other versions?
sedonawebservices pro commented 5 years ago
Hi, thank you. It turns out there was not a CSS conflict, but I needed to ensure that the CSS files were imported before attempting to import any components. See answer below.
Problem was solved by ensuring that any components were imported AFTER the required CSS files.
Originally, I had imported App.js above the CSS files, and App.js contains all of my imported MDB components. So I needed to move App.js to the position below.
Thank you!
import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter as Router } from 'react-router-dom';
import '@fortawesome/fontawesome-free/css/all.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';
import './index.css';
import App from './App';
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById('root')
);
Aliaksandr Andrasiuk staff commented 5 years ago
Hi, I'm Glad that the problem was solved.
Happy hacking :)
Best regards.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: No
- Technology: MDB React
- MDB Version: 4.16.0
- Device: Macbook
- Browser: Chrome
- OS: OS X
- Provided sample code: No
- Provided link: No