card-footer

web
mobile

Aroquiassamy LA ROZE pro premium asked 12 months 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 12 months 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 answered 12 months 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 12 months 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


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: Angular
  • MDB Version: 7.4.2
  • Device: Lenova
  • Browser: Chrome 7.2
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No