Rotating Card - text at bottom of front face of card


Topic: Rotating Card - text at bottom of front face of card

Louw pro asked 7 years ago

Hi, how will you position text at the bottom right corner of the front of the rotating card?Regards

Damian Gemza staff answered 7 years ago

Dear Louw,

At the end of div with .card-body class place paragraph with your text, and add a .text-right class to this paragraph.

For example:

<div class="card-body">

<h4>Jonathan Doe</h4>

<p>Web developer</p>

<!--Triggering button-->

<a class="rotate-btn"data-card="card-1" (click)="cards.toggle()"><iclass="fa fa-repeat"></i> Click here to rotate</a>

<p class="text-right">Custom text</p>

</div>

Let me know if this is your desired behavior.
Best Regards,
Damian


Louw pro commented 7 years ago

Hi Damian, I've done that, but it only places the content at the end of the "Body" of the card, and not at the "bottom" of the card. My card has variable length content, and I'm looking at placing text right at the bottom of the card - a footer section, that is always on the bottom edge of the card. Thx

Damian Gemza staff commented 7 years ago

So place it outside of card-body div and set position: absolute and some bottom value. It cause, that your paragraph should stay in one place all the time. Best Regards, Damian

Louw pro commented 7 years ago

Hi Damian, Placing outside the card-body cause the text to display "outside" the rotating card canvas. After playing around with "flexbox", I've managed to get the desired result. <pre><mdb-card-rotating #card class="px-1"> <!--Front Side--> <div class="face front tp-box_side tp-box_front" > <!--Content--> <div class="card-body p-0 h-100 d-flex flex-column justify-content-start"> ..... <div class="h-100 ml-auto d-flex flex-column justify-content-end"><small>Custom Text</small></div> </div> </div> <!--/.Front Side--> <!--Back Side--> <div class="back tp-box_side tp-box_back" > <!--Content--> <!--/.Back Side--> </mdb-card-rotating></pre> Thanks for your assistance.

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No