Aroquiassamy LA ROZE priority asked 5 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 5 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


Aroquiassamy LA ROZE priority answered 5 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 5 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



Please insert min. 20 characters.

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: Priority
  • 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