Modal not visible. Add css and js cnd files


Topic: Modal not visible. Add css and js cnd files

matthewericfisher asked 3 years ago

I just upgraded to the MDB Pro React. I want to use the Modal. The Modal is not displaying. Using the debugger in Chrome I can see that the Modal is there just not visible. I added the css and js files. Is there something else need to have the correct css for the MDBModal component?

index.html

A simple modal component

import React, { Component } from 'react';
import { MDBContainer, MDBBtn, MDBModal, MDBModalBody, MDBModalHeader, MDBModalFooter } from 'mdbreact';

  class SymbolFilterPanelModal extends Component { 
    state = { modal: true };

    toggle = () => { 
      this.setState({ modal: !this.state.modal });
    } 

    render() { 
      return ( 
        MDBModal title (...) Close Save changes 
    ); 
  }
}

export default SymbolFilterPanelModal;

Jakub Mandra staff premium answered 3 years ago

Hi,

Try this code:

import React, { Component } from 'react';
import { MDBContainer, MDBBtn, MDBModal, MDBModalBody, MDBModalHeader, MDBModalFooter } from 'mdbreact';

class SymbolFilterPanelModal extends Component {
  state = { modal: true };

  toggle = () => {
    this.setState({ modal: !this.state.modal });
  }

  render() {
    return (
      <MDBContainer>
        <MDBBtn onClick={this.toggle}>Modal</MDBBtn>

        <MDBModal isOpen={this.state.modal} toggle={this.toggle}>
          <MDBModalBody>
            (...)
          </MDBModalBody>
        </MDBModal>
      </MDBContainer>
    );
  }
}

export default SymbolFilterPanelModal;

Modal needs property isOpen to be passed on.

You can find more info in the API section of the Modal documentation.

Best,

Jakub


matthewericfisher commented 3 years ago

Jakub,

Thanks for the reply. I started with that code. The model does open and close it is just invisible. In the Chrome debugger, I can use the inspect tool to 'see' where the modal is. I can even click the button. It must be a problem with the css. Is there an example that shows which .css and .js files to include in the index.html and index.js?

I found the following in the docs and added to index.html.

--Matt


In the index.html had:

It seems that the verision difference in bootstrap was causing confusion in the css.


Jakub Mandra staff premium answered 3 years ago

Your code did not save :)

But anyway - to attach mdbreact you don't have to modify index.html, just install mdbreact dependancy and import styles in index.js.

Example index.js from create-react-app with mdb imports (order matters!!):

import React from 'react';
import ReactDOM from 'react-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';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

Our users tend to have problems with installation, we have updated the getting started docs, which you can find here: 5 min quick start.

Any feedback will be warmly welcome :)

Best,

Jakub


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: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.8.4
  • Device: desktop
  • Browser: chrome
  • OS: osx
  • Provided sample code: No
  • Provided link: No