Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: MDBSelect not working!!

Ivan Ivanov free asked 6 years 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.


nathanjenkins free answered 5 years ago


Hey had the same problem make sure you import css/addons-pro/


Piotr Glejzer staff commented 5 years ago

Thanks for the message. Have a nice day.


Anna Morawska staff answered 6 years ago


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


Anna Morawska staff answered 6 years ago


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 free 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.


Anna Morawska staff answered 6 years ago


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 free 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.



As you can see in the docs page, Material Select is a premium component which isn't available in MDB React Free


Ivan Ivanov free 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 free commented 6 years ago

Btw here's order refference #83970 2019-01-08 13:02:59



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

  • ForumUser: 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