Topic: "react/forms/basic example/a gradient login form" class missing in example code
misura
free
asked 5 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:
expected:
Marta Wierzbicka
free
answered 5 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: 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