MDB Cards No Longer Showing in Application

Topic: MDB Cards No Longer Showing in Application

Drew Ipson free asked 4 years 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>

Add comment

Jakub Chmura staff answered 4 years ago

1 0 Best answer

<p>Hi <a href="/profile/?id=98219" target="_blank" rel="nofollow">@Drew Ipson</a>,</p>

<p>I just tested your code and it works fine.</p>

<p>First of all, I saw that you use <code>white-class</code>. 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 <code>backgroundColor</code> to black everything was visible so I paste the example below:</p>

<pre class="prettyprint"><code> <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>
</code></pre>

<p>If this component is not rendering at all, then I have a quick solution for most cases like this. Please remove your <code>node-module</code> folder and <code>package-lock.json</code>/<code>yarn.lock</code> and after that run <code>npm i</code>/<code>yarn</code> command in your console to install dependency again.</p>

<p>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.</p>

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: 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

Drew Ipson

5Support score
1Questions 0Answers 0Snippets