MDB Cards No Longer Showing in Application

web
mobile

Topic: MDB Cards No Longer Showing in Application

Drew Ipson asked 2 months ago

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>

Jakub Chmura staff premium answered 2 months ago

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


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: React
  • MDB Version: 4.25.4
  • Device: Surface Book
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No