Topic: card-footer
Aroquiassamy LA ROZE pro premium priority asked 6 years ago
Hi @Damian,
Expected behavior
Card Footer Must be inside the card body
Actual behavior
Card Footer is away from the card Body and it is in different position .I'm using Card-Deck inside which I'm using cascading card...
I want to know how to use card-footer for a cascade card in card-deck.
Damian Gemza staff answered 6 years ago
Dear La Roze,
You're wrong. Why you're assuming, thatmdb-card-footer
should be placed insidemdb-card-body
?
Card Footer shouldn't be placed inside Card Body component.
Please show me the code which causes you problems, because I'm not able to debug your problem without the code.
Best Regards,
Damian
Aroquiassamy LA ROZE pro premium priority answered 6 years ago
<div class="card-deck py-2">
<mdb-card cascade="true" wider="true">
<div class="view view-cascade gradient-card-header aqua-gradient waves-light">
<h2 class="h1-responsive card-header-title mb-2 wow fadeInDown" data-wow-delay="0.3s">
<i class="fas fa-phone mr-2"></i>ABC</h2>
</div>
<mdb-card-body cascade="true">
<mdb-card-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat neque et ex auctor aliquam.
Fusce id odio accumsan libero auctor eleifend at vitae elit. Integer fermentum purus augue, sit amet
pharetra odio laoreet et. Pellentesque pellentesque nisl non leo tempor congue. Etiam iaculis eros
ante, et venenatis diam vestibulum eu. Maecenas nec risus accumsan, facilisis nibh id, malesuada justo.
Quisque eget ex lacus. Praesent dapibus pulvinar sem, non accumsan neque aliquet quis.
</mdb-card-text>
</mdb-card-body>
<mdb-card-footer>
<a routerLink="/erp-info" class=" orange-text mt-1 d-flex flex-row-reverse ">
<h5 class="waves-effect p-2" mdbWavesEffect>Read more
<i class="fas fa-chevron-right"></i>
</h5>
</a>
</mdb-card-footer>
</mdb-card>
<mdb-card cascade="true" wider="true">
<div class="view view-cascade gradient-card-header aqua-gradient">
<h2 class="h1-responsive card-header-title mb-2 wow fadeInDown" data-wow-delay="0.3s">
<i class="far fa-calendar-check mr-2"></i>DEF
</h2>
</div>
<mdb-card-body cascade=true>
<mdb-card-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat neque et ex auctor aliquam.
Fusce id odio accumsan libero auctor eleifend at vitae elit. Integer fermentum purus augue, sit amet
pharetra odio laoreet et. Pellentesque pellentesque nisl non leo tempor congue. Etiam iaculis eros
ante, et venenatis diam vestibulum eu. Maecenas nec risus accumsan, facilisis nibh id, malesuada justo.
Quisque eget ex lacus. Praesent dapibus pulvinar sem, non accumsan neque aliquet quis.
</mdb-card-text>
</mdb-card-body>
<mdb-card-footer>
<a routerLink="/erp-info" class=" orange-text mt-1 d-flex flex-row-reverse ">
<h5 class="waves-effect p-2" mdbWavesEffect>Read more
<i class="fas fa-chevron-right"></i>
</h5>
</a>
</mdb-card-footer>
</mdb-card>
<mdb-card cascade="true" wider="true">
<div class="view view-cascade gradient-card-header aqua-gradient">
<h2 class="h1-responsive card-header-title mb-2 wow fadeInDown" data-wow-delay="0.3s"><i class="fas fa-chart-line mr-2"
aria-hidden="true"></i>GHI</h2>
</div>
<mdb-card-body cascade="true">
<mdb-card-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat neque et ex auctor aliquam.
Fusce id odio accumsan libero auctor eleifend at vitae elit. Integer fermentum purus augue, sit amet
pharetra odio laoreet et. Pellentesque pellentesque nisl non leo tempor congue. Etiam iaculis eros
ante, et venenatis diam vestibulum eu. Maecenas nec risus accumsan, facilisis nibh id, malesuada justo.
Quisque eget ex lacus. Praesent dapibus pulvinar sem, non accumsan neque aliquet quis.
</mdb-card-text>
</mdb-card-body>
<mdb-card-footer>
<a routerLink="/erp-info" class=" orange-text mt-1 d-flex flex-row-reverse ">
<h5 class="waves-effect p-2" mdbWavesEffect>Read more
<i class="fas fa-chevron-right"></i>
</h5>
</a>
</mdb-card-footer>
</mdb-card>
Damian Gemza staff answered 6 years ago
Okay now I get it.
I have to investigate this problem. Unfortunately for now, I'm not able to provide you some workaround. Please be patient.
Best Regards,
Damian
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: 7.4.2
- Device: Lenova
- Browser: Chrome 7.2
- OS: Windows 10
- Provided sample code: No
- Provided link: No