Why result from my web not same example on document

Topic: Why result from my web not same example on document

stylemaxz pro asked 5 years ago

Problem

I copied code on angular document/Cards from example but It's not show same example

Resources (screenshots, code snippets etc.)

This is from angular document This is from document This is from my website

`

  <!--Card image-->
  <div class="view view-cascade overlay waves-light" mdbWavesEffect>
    <mdb-card-img src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img%20%283%29.jpg"></mdb-card-img>
    <a>
      <div class="mask rgba-white-slight"></div>
    </a>
  </div>
  <!--/Card image-->

  <mdb-card-body cascade="true" class="text-center">
    <!--Card content-->
    <!--Title-->
    <h4 class="card-title">
      <strong>Alice Mayer</strong>
    </h4>
    <h5 class="indigo-text">
      <strong>Photographer</strong>
    </h5>

    <mdb-card-text>
      Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem
      aperiam.
    </mdb-card-text>

    <!--Linkedin-->
    <a class="px-2 icons-sm li-ic">
      <i class="fab fa-linkedin-in"> </i>
    </a>
    <!--Twitter-->
    <a class="px-2 icons-sm tw-ic">
      <i class="fab fa-twitter"> </i>
    </a>
    <!--Dribbble-->
    <a class="px-2 icons-sm fb-ic">
      <i class="fab fa-facebook-f"> </i>
    </a>

  </mdb-card-body>
  <!--/.Card content-->

</mdb-card>
<!--/.Card-->

  <!--Card image-->
  <div class="view view-cascade overlay waves-light" mdbWavesEffect>
    <mdb-card-img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg"></mdb-card-img>
    <a>
      <div class="mask rgba-white-slight"></div>
    </a>
  </div>
  <!--/Card image-->

  <mdb-card-body cascade="true" class="text-center">
    <!--Card content-->
    <h5 class="pink-text">
      <i class="fas fa-utensils"></i> Culinary</h5>
    <!--Title-->
    <h4 class="card-title">Cheat day inspirations</h4>
    <!--Text-->

    <mdb-card-text>
      Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem
      aperiam.
    </mdb-card-text>

    <a class="btn btn-unique waves-light" mdbWavesEffect>Button</a>

  </mdb-card-body>
  <!--/.Card content-->

</mdb-card>
<!--/.Card-->

  <!--Card image-->
  <div class="view view-cascade overlay waves-light" mdbWavesEffect>
    <mdb-card-img src="https://mdbootstrap.com/img/Photos/Others/men.jpg"></mdb-card-img>
    <a>
      <div class="mask rgba-white-slight"></div>
    </a>
  </div>
  <!--/Card image-->

  <mdb-card-body cascade="true" class="text-center">
    <!--Card content-->
    <h4 class="card-title">
      <strong>Billy Cullen</strong>
    </h4>
    <h5>Web developer</h5>

    <mdb-card-text>
      Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem
      aperiam.
    </mdb-card-text>

    <!--Facebook-->
    <a type="button" class="btn-floating btn-small btn-fb waves-light" mdbWavesEffect>
      <i class="fab fa-facebook-f"></i>
    </a>
    <!--Twitter-->
    <a type="button" class="btn-floating btn-small btn-tw waves-light" mdbWavesEffect>
      <i class="fab fa-twitter"></i>
    </a>
    <!--Google +-->
    <a type="button" class="btn-floating btn-small btn-dribbble waves-light" mdbWavesEffect>
      <i class="fab fa-dribbble"></i>
    </a>

  </mdb-card-body>
  <!--/.Card content-->

</mdb-card>
<!--/.Card-->

Add comment

stylemaxz pro answered 5 years ago

0 0 Best answer

Dear Damian

After I npm install everything is fine

Thank you for support

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

<p>Dear stylemaxz,</p>

<p>I have copied your code, but it's incomplete. You're missing there a <code>mdb-card</code> opening tags, and grid (<code>div.row</code> and <code>div.col-md-4</code>).</p>

<p>When I have added those missing elements, everything works fine.</p>

<p>Could you please try to copy the below code, and check if the problem still exist?</p>

<mdb-card-body cascade="true" class="text-center">
        
        
        <h4 class="card-title">
          <strong>Alice Mayer</strong>
        </h4>
        <h5 class="indigo-text">
          <strong>Photographer</strong>
        </h5>

<mdb-card-text>
          Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem
          aperiam.
        </mdb-card-text>

<a class="px-2 icons-sm li-ic">
          <i class="fab fa-linkedin-in"> </i>
        </a>
        
        <a class="px-2 icons-sm tw-ic">
          <i class="fab fa-twitter"> </i>
        </a>
        
        <a class="px-2 icons-sm fb-ic">
          <i class="fab fa-facebook-f"> </i>
        </a>

</mdb-card-body>

</mdb-card>
  </div>
  <div class="col-md-4">
    <mdb-card cascade="true" narrower="true">
      
      <div class="view view-cascade overlay waves-light" mdbWavesEffect>
        <mdb-card-img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg"></mdb-card-img>
        <a>
          <div class="mask rgba-white-slight"></div>
        </a>
      </div>

<mdb-card-body cascade="true" class="text-center">
        
        <h5 class="pink-text">
          <i class="fas fa-utensils"></i> Culinary</h5>
        
        <h4 class="card-title">Cheat day inspirations</h4>

<mdb-card-text>
          Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem
          aperiam.
        </mdb-card-text>

<a class="btn btn-unique waves-light" mdbWavesEffect>Button</a>

</mdb-card-body>

</mdb-card>
    </div>
  <div class="col-md-4">
    <mdb-card cascade="true">
      
      <div class="view view-cascade overlay waves-light" mdbWavesEffect>
        <mdb-card-img src="https://mdbootstrap.com/img/Photos/Others/men.jpg"></mdb-card-img>
        <a>
          <div class="mask rgba-white-slight"></div>
        </a>
      </div>

<mdb-card-body cascade="true" class="text-center">
        
        <h4 class="card-title">
          <strong>Billy Cullen</strong>
        </h4>
        <h5>Web developer</h5>

<mdb-card-text>
          Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem
          aperiam.
        </mdb-card-text>

<a type="button" class="btn-floating btn-small btn-fb waves-light" mdbWavesEffect>
          <i class="fab fa-facebook-f"></i>
        </a>
        
        <a type="button" class="btn-floating btn-small btn-tw waves-light" mdbWavesEffect>
          <i class="fab fa-twitter"></i>
        </a>
        
        <a type="button" class="btn-floating btn-small btn-dribbble waves-light" mdbWavesEffect>
          <i class="fab fa-dribbble"></i>
        </a>

</mdb-card-body>

</mdb-card>
    </div>
</div>
</code></pre>

<p>Best Regards,</p>

<p>Damian</p>

Please insert min. 20 characters.

Dear stylemaxz,

I have copied your code, but it's incomplete. You're missing there a mdb-card opening tags, and grid (div.row and div.col-md-4).

When I have added those missing elements, everything works fine.

Could you please try to copy the below code, and check if the problem still exist?

<div class="row">
  <div class="col-md-4">
    <mdb-card cascade="true" wider="true">
      <!--Card image-->
      <div class="view view-cascade overlay waves-light" mdbWavesEffect>
        <mdb-card-img src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img%20%283%29.jpg"></mdb-card-img>
        <a>
          <div class="mask rgba-white-slight"></div>
        </a>
      </div>
      <!--/Card image-->

      <mdb-card-body cascade="true" class="text-center">
        <!--Card content-->
        <!--Title-->
        <h4 class="card-title">
          <strong>Alice Mayer</strong>
        </h4>
        <h5 class="indigo-text">
          <strong>Photographer</strong>
        </h5>

        <mdb-card-text>
          Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem
          aperiam.
        </mdb-card-text>

        <!--Linkedin-->
        <a class="px-2 icons-sm li-ic">
          <i class="fab fa-linkedin-in"> </i>
        </a>
        <!--Twitter-->
        <a class="px-2 icons-sm tw-ic">
          <i class="fab fa-twitter"> </i>
        </a>
        <!--Dribbble-->
        <a class="px-2 icons-sm fb-ic">
          <i class="fab fa-facebook-f"> </i>
        </a>

      </mdb-card-body>
      <!--/.Card content-->

    </mdb-card>
  </div>
  <div class="col-md-4"><!--/.Card-->
    <mdb-card cascade="true" narrower="true">
      <!--Card image-->
      <div class="view view-cascade overlay waves-light" mdbWavesEffect>
        <mdb-card-img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg"></mdb-card-img>
        <a>
          <div class="mask rgba-white-slight"></div>
        </a>
      </div>
      <!--/Card image-->

      <mdb-card-body cascade="true" class="text-center">
        <!--Card content-->
        <h5 class="pink-text">
          <i class="fas fa-utensils"></i> Culinary</h5>
        <!--Title-->
        <h4 class="card-title">Cheat day inspirations</h4>
        <!--Text-->

        <mdb-card-text>
          Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem
          aperiam.
        </mdb-card-text>

        <a class="btn btn-unique waves-light" mdbWavesEffect>Button</a>

      </mdb-card-body>
      <!--/.Card content-->

    </mdb-card>
    <!--/.Card--></div>
  <div class="col-md-4">
    <mdb-card cascade="true">
      <!--Card image-->
      <div class="view view-cascade overlay waves-light" mdbWavesEffect>
        <mdb-card-img src="https://mdbootstrap.com/img/Photos/Others/men.jpg"></mdb-card-img>
        <a>
          <div class="mask rgba-white-slight"></div>
        </a>
      </div>
      <!--/Card image-->

      <mdb-card-body cascade="true" class="text-center">
        <!--Card content-->
        <h4 class="card-title">
          <strong>Billy Cullen</strong>
        </h4>
        <h5>Web developer</h5>

        <mdb-card-text>
          Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem
          aperiam.
        </mdb-card-text>

        <!--Facebook-->
        <a type="button" class="btn-floating btn-small btn-fb waves-light" mdbWavesEffect>
          <i class="fab fa-facebook-f"></i>
        </a>
        <!--Twitter-->
        <a type="button" class="btn-floating btn-small btn-tw waves-light" mdbWavesEffect>
          <i class="fab fa-twitter"></i>
        </a>
        <!--Google +-->
        <a type="button" class="btn-floating btn-small btn-dribbble waves-light" mdbWavesEffect>
          <i class="fab fa-dribbble"></i>
        </a>

      </mdb-card-body>
      <!--/.Card content-->

    </mdb-card>
    <!--/.Card--></div>
</div>

Best Regards,

Damian

Add comment

stylemaxz pro answered 5 years ago

0 0 Best answer

Hi, Arkadiusz Idzikowski

I mean style Card (Wider, Narrower, Regular) in example not same my website. In example is beautiful Cards style but my website is just normal style like example

enter image description here

My style card Just normal like this

enter image description here

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

<p>In the examples we use code for Font Awesome 5 icons. You need to install '@fortawesome/fontawesome-free' package and add those imports to the styles array in your angular.json file:</p>

<pre class="prettyprint"><code>"styles": [
    "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
    "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
    "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
    "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
    "node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
    "node_modules/angular-bootstrap-md/scss/mdb-free.scss",
    "src/styles.scss"
],
</code></pre>

<p>The only difference between code from documentation and example is photo of first card. Please try to use this code:</p>

<div class="view view-cascade overlay waves-light" mdbWavesEffect>
        <mdb-card-img src="https://mdbootstrap.com/img/Photos/Others/photo6.jpg"></mdb-card-img>
        <a>
          <div class="mask rgba-white-slight"></div>
        </a>
      </div>

<mdb-card-text>
          Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem
          aperiam.
        </mdb-card-text>

</mdb-card-body>

</mdb-card>
    
  </div>

<div class="view view-cascade overlay waves-light" mdbWavesEffect>
        <mdb-card-img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg"></mdb-card-img>
        <a>
          <div class="mask rgba-white-slight"></div>
        </a>
      </div>

<mdb-card-text>
          Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem
          aperiam.
        </mdb-card-text>

<a class="btn btn-unique waves-light" mdbWavesEffect>Button</a>

</mdb-card-body>

</mdb-card>
    
  </div>

<div class="view view-cascade overlay waves-light" mdbWavesEffect>
        <mdb-card-img src="https://mdbootstrap.com/img/Photos/Others/men.jpg"></mdb-card-img>
        <a>
          <div class="mask rgba-white-slight"></div>
        </a>
      </div>

<mdb-card-body cascade="true" class="text-center">
        
        <h4 class="card-title">
          <strong>Billy Cullen</strong>
        </h4>
        <h5>Web developer</h5>

<mdb-card-text>
          Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem
          aperiam.
        </mdb-card-text>

</mdb-card-body>

</mdb-card>
    
  </div>
</div>
</code></pre>

Please insert min. 20 characters.

In the examples we use code for Font Awesome 5 icons. You need to install '@fortawesome/fontawesome-free' package and add those imports to the styles array in your angular.json file:

"styles": [
    "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
    "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
    "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
    "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
    "node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
    "node_modules/angular-bootstrap-md/scss/mdb-free.scss",
    "src/styles.scss"
],

The only difference between code from documentation and example is photo of first card. Please try to use this code:

<div class="row">
  <div class="col-md-4">
    <!--Card-->
    <mdb-card cascade="true" wider="true">

      <!--Card image-->
      <div class="view view-cascade overlay waves-light" mdbWavesEffect>
        <mdb-card-img src="https://mdbootstrap.com/img/Photos/Others/photo6.jpg"></mdb-card-img>
        <a>
          <div class="mask rgba-white-slight"></div>
        </a>
      </div>
      <!--/Card image-->

      <mdb-card-body cascade="true" class="text-center">
        <!--Card content-->
        <!--Title-->
        <h4 class="card-title">
          <strong>Alice Mayer</strong>
        </h4>
        <h5 class="indigo-text">
          <strong>Photographer</strong>
        </h5>

        <mdb-card-text>
          Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem
          aperiam.
        </mdb-card-text>

        <!--Linkedin-->
        <a class="px-2 icons-sm li-ic">
          <i class="fab fa-linkedin-in"> </i>
        </a>
        <!--Twitter-->
        <a class="px-2 icons-sm tw-ic">
          <i class="fab fa-twitter"> </i>
        </a>
        <!--Dribbble-->
        <a class="px-2 icons-sm fb-ic">
          <i class="fab fa-facebook-f"> </i>
        </a>

      </mdb-card-body>
      <!--/.Card content-->

    </mdb-card>
    <!--/.Card-->
  </div>

  <div class="col-md-4">
    <!--Card-->
    <mdb-card cascade="true" narrower="true">

      <!--Card image-->
      <div class="view view-cascade overlay waves-light" mdbWavesEffect>
        <mdb-card-img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg"></mdb-card-img>
        <a>
          <div class="mask rgba-white-slight"></div>
        </a>
      </div>
      <!--/Card image-->

      <mdb-card-body cascade="true" class="text-center">
        <!--Card content-->
        <h5 class="pink-text">
          <i class="fas fa-utensils"></i> Culinary</h5>
        <!--Title-->
        <h4 class="card-title">Cheat day inspirations</h4>
        <!--Text-->

        <mdb-card-text>
          Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem
          aperiam.
        </mdb-card-text>

        <a class="btn btn-unique waves-light" mdbWavesEffect>Button</a>

      </mdb-card-body>
      <!--/.Card content-->

    </mdb-card>
    <!--/.Card-->
  </div>

  <div class="col-md-4">
    <!--Card-->
    <mdb-card cascade="true">

      <!--Card image-->
      <div class="view view-cascade overlay waves-light" mdbWavesEffect>
        <mdb-card-img src="https://mdbootstrap.com/img/Photos/Others/men.jpg"></mdb-card-img>
        <a>
          <div class="mask rgba-white-slight"></div>
        </a>
      </div>
      <!--/Card image-->

      <mdb-card-body cascade="true" class="text-center">
        <!--Card content-->
        <h4 class="card-title">
          <strong>Billy Cullen</strong>
        </h4>
        <h5>Web developer</h5>

        <mdb-card-text>
          Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem
          aperiam.
        </mdb-card-text>

        <!--Facebook-->
        <a type="button" class="btn-floating btn-small btn-fb waves-light" mdbWavesEffect>
          <i class="fab fa-facebook-f"></i>
        </a>
        <!--Twitter-->
        <a type="button" class="btn-floating btn-small btn-tw waves-light" mdbWavesEffect>
          <i class="fab fa-twitter"></i>
        </a>
        <!--Google +-->
        <a type="button" class="btn-floating btn-small btn-dribbble waves-light" mdbWavesEffect>
          <i class="fab fa-dribbble"></i>
        </a>

      </mdb-card-body>
      <!--/.Card content-->

    </mdb-card>
    <!--/.Card-->
  </div>
</div>

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: 7.4.3
Device: macbook
Browser: chrome
OS: macos
Provided sample code: No
Provided link: No

stylemaxz

Pro User 25Support score
1Questions 2Answers 0Snippets