Topic: MDB Cards No Longer Showing in Application
Expected behavior**As of yesterday, MDBCards showing MDBBody, MDBHeader, MDBFooter, etc and Card Content should appear on webpage as they render from the JSX in the browser as the page loads. *Actual behavior*Page is loading without cards throughout the entire application. Whether they are forms or cards displaying content the MDBCards no longer render in the browser. Application loads with no errors and every other JSX component loads as expected. I've included the code snippet of one of the cards that should show, but in the application there are about 10 cards total that do not render.**Resources (screenshots, code snippets etc.)
<MDBCard id="classic-card">
<MDBCardBody className="white-text">
<h3 className="text-center">
<MDBIcon icon="user" /> Sign In:
</h3>
<hr className="hr-light" />
<form>
<MDBInput
className="white-text"
iconClass="white-text"
label="Your email"
icon="envelope"
/>
<MDBInput
className="white-text"
iconClass="white-text"
label="Your password"
icon="lock"
type="password"
/>
<div className="text-center mt-4 black-text">
<MDBBtn gradient="blue">Login</MDBBtn>
</div>
</form>
</MDBCardBody>
</MDBCard>
Hi @Drew Ipson,
I just tested your code and it works fine.
First of all, I saw that you use white-class. When I was testing your code, card components render properly but everything was white and most of the elements inside card not visible. But when I change backgroundColor to black everything was visible so I paste the example below:
<MDBCard id='classic-card'>
<MDBCardBody
className='white-text'
style={{ backgroundColor: 'black' }}
>
<h3 className='text-center'>
<MDBIcon icon='user' /> Sign In:
</h3>
<hr className='hr-light' />
<form>
<MDBInput
className='white-text'
iconClass='white-text'
label='Your email'
icon='envelope'
/>
<MDBInput
className='white-text'
iconClass='white-text'
label='Your password'
icon='lock'
type='password'
/>
<div className='text-center mt-4 black-text'>
<MDBBtn gradient='blue'>Login</MDBBtn>
</div>
</form>
</MDBCardBody>
</MDBCard>
If this component is not rendering at all, then I have a quick solution for most cases like this. Please remove your node-module folder and package-lock.json/yarn.lock and after that run npm i/yarn command in your console to install dependency again.
As I said the solution above works in a lot of cases like yours when something is not showing properly or not rendering at all. But if this solution doesn't work in your case, then I would ask you for more code examples and details.
Best, Kuba
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.25.4
- Device: Surface Book
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No