MDBSelect not working!!


Topic: MDBSelect not working!!

Ivan Ivanov asked 2 weeks ago

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.


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 2 weeks 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 2 weeks 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 2 weeks 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 a week 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


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: React
  • MDB Version: 4.8.4
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No
Tags