Topic: "react/forms/basic example/a gradient login form" class missing in example code

misura free asked 3 years ago


Expected behavior Login form like the example (https://mdbootstrap.com/docs/react/forms/basic/#form-gradient)

Actual behavior The example code render a login form as show below. That code use the tag with "form-header" class that is not in the mdb.css file. Am i using a wrong mdb.css file? If yes, where i can found the right file?

Resources (screenshots, code snippets etc.) packege.json:

{
  "name": "mdbreacttest",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "mdbreact": "^4.21.0",
    "react": "^16.10.2",
    "react-dom": "^16.10.2",
    "react-scripts": "3.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

index.js:

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 {
  MDBContainer,
  MDBRow,
  MDBCol,
  MDBCard,
  MDBCardBody,
  MDBModalFooter,
  MDBIcon,
  MDBCardHeader,
  MDBBtn,
  MDBInput
} from "mdbreact";

const App = () =>  {
  return(
  <MDBContainer>
  <MDBRow>
    <MDBCol md="6">
      <MDBCard>
        <MDBCardBody>
          <MDBCardHeader className="form-header deep-blue-gradient rounded">
            <h3 className="my-3">
              <MDBIcon icon="lock" /> Login:
            </h3>
          </MDBCardHeader>
          <form>
            <div className="grey-text">
              <MDBInput label="Type your email" icon="envelope" group type="email" validate error="wrong" success="right" />
              <MDBInput label="Type your password" icon="lock" group type="password" validate />
            </div>

          <div className="text-center mt-4">
            <MDBBtn color="light-blue" className="mb-3" type="submit" >
              Login
            </MDBBtn>
          </div>
          </form>
          <MDBModalFooter>
            <div className="font-weight-light">
              <p>Not a member? Sign Up</p>
              <p>Forgot Password?</p>
            </div>
          </MDBModalFooter>
        </MDBCardBody>
      </MDBCard>
    </MDBCol>
  </MDBRow>
  </MDBContainer>
  )}
ReactDOM.render(<App />, document.getElementById('root'));

result: enter image description here

expected: enter image description here


Marta Wierzbicka staff answered 3 years ago


Hi,

this cascading form with header is a premium component and according to our system you are the user of MDB free, that's why it looks bad in your project. There is a bug in our documentation and I apologize for that, we will label these forms in our documentation properly.

Best, Marta



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.21.0
  • Device: pc
  • Browser: firefox
  • OS: linux
  • Provided sample code: No
  • Provided link: Yes