No MDB React asset I've used so far has worked as expec


Topic: No MDB React asset I've used so far has worked as expected

jpcantalino pro asked 5 years ago

Having come from MDB jQuery, I'm used to how the various assets are intended to work, including the layouts and masks etc. After moving to the React edition, absolutely nothing I've done with the library has worked as the documentation says it should. Below is a very simple page that I've been working on for hours trying to get everything to work without some hacky garbage added in. All I'm trying to do is put some content on top of a masked background. Something that was incredibly straight-forward in the jQuery edition.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import '@fortawesome/fontawesome-free/css/all.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';
import {MDBContainer, MDBMask, MDBView, MDBCol, MDBRow, MDBCard, MDBBtn} from "mdbreact";

class Background extends React.Component {
  render() {
    return(
      <div className="background"/>
      )
  }
}

const App = () => {
  return(
      <MDBContainer fluid style={{padding: 0}}>
        <MDBView>
          <Background/>
          <MDBMask overlay="black-strong">
            <MDBRow middle>
              <MDBCol size={4} className="offset-4">
                <MDBBtn color="outline">Button</MDBBtn>
              </MDBCol>
            </MDBRow>
          </MDBMask>
        </MDBView>
      </MDBContainer>
  )
};

First problem: the container naturally does not expand to fit the viewport and style={{padding: 0} had to be added. The documentation clearly states: Use fluid prop for a full-width container, spanning the entire width of the viewport.

Second problem: the middle tag for aligning Rows to the center of the container doesn't seem to work either. The documentation clearly states: Use MDBReact alignment utilities to vertically and horizontally align columns.

Third problem: outline buttons don't seem to work as expected either. Adding outline to the button declaration does nothing. It remains rendered as btn-default. I had to add the following CSS to get an outline of any color.

.btn{
  border: 2px solid white !important;
  color: white !important;
}

The structure that used to apply in other editions of MDB don't seem to apply at all. That or the documentation is badly written, but what else is new.


Jakub Chmura staff premium answered 5 years ago

Hi @jpcantalino,

  1. MDB product is based on bootstrap and material design. So our MDBContainer component have the same styles as <div class='container-fluid>. So when you use component you need to set inline style or custom class to overwrite default bootstrap styles.

  2. Middle prop works properly for me. You should only align elements inside MDBCol.

  3. We already working at the MDBBtn component, and we try to fix it. I suggest you to use previous version of MDB react.

Here is a code sample that you update that works for me.

import React from 'react';
import './index.css';
import '@fortawesome/fontawesome-free/css/all.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';
import {
  MDBContainer,
  MDBMask,
  MDBCol,
  MDBRow,
  MDBBtn
} from 'mdbreact';

class Background extends React.Component {
  render() {
    return <div className='background' />;
  }
}

const App = () => {
  return (
    <MDBContainer fluid>
      <Background />
      <MDBMask overlay='black-strong'>
        <MDBRow middle>
          <MDBCol size={4} className='offset-4'>
            <MDBBtn outline color='red'>
              Button
            </MDBBtn>
          </MDBCol>
        </MDBRow>
      </MDBMask>
    </MDBContainer>
  );
};

export default App;

Best, Kuba


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: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.23.1
  • Device: Desktop
  • Browser: Chrome
  • OS: Ubuntu
  • Provided sample code: No
  • Provided link: No