Strange behaviour with Action button and cards in Card-colum

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Strange behaviour with Action button and cards in Card-columns

yddap17 pro asked 6 years ago

Hi there,

I have a Layout like this: https://abload.de/image.php?img=cardlayoutjcc1h.png

This is the according code:

<div class="row">
<div class="col-12 my-4">
<div class="card card-cascade narrower">
<div class="view view-cascade gradient-card-header blue darken-2">
<h2 class="card-header-title">Test</h2>
</div>
<a class="btn-floating btn-action ml-auto mr-4 mdb-color lighten-3"><i class="fa fa-chevron-right pl-1"></i></a>
<div class="card-body text-center">
<p>body</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card-columns">
<div class="card card-cascade narrower">
<div class="view view-cascade gradient-card-header blue darken-2">
<h2 class="card-header-title">Test</h2>
</div>
<a class="btn-floating btn-action ml-auto mr-4 mdb-color lighten-3"><i class="fa fa-chevron-right pl-1"></i></a>
<div class="card-body text-center">
<p>body</p>
</div>
</div>
<div class="card card-cascade narrower">
<div class="view view-cascade gradient-card-header blue darken-2">
<h2 class="card-header-title">Test</h2>
</div>
<a class="btn-floating btn-action ml-auto mr-4 mdb-color lighten-3"><i class="fa fa-chevron-right pl-1"></i></a>
<div class="card-body text-center">
<p>body</p>
</div>
</div>
<div class="card card-cascade narrower">
<div class="view view-cascade gradient-card-header blue darken-2">
<h2 class="card-header-title">Test</h2>
</div>
<a class="btn-floating btn-action ml-auto mr-4 mdb-color lighten-3"><i class="fa fa-chevron-right pl-1"></i></a>
<div class="card-body text-center">
<p>body</p>
</div>
</div>
</div>
</div>
</div>

The only difference is that the 2. row has a card-columns layout described here: https://getbootstrap.com/docs/4.0/components/card/#card-columns

But it seems that it doesnt work with the Action Button.

Or what am I doing wrong?

Marta Szymanska staff pro premium answered 6 years ago

Hi, if you replace the .ml-auto class within card-columns with the .float-right class, it will be a fine solution for you? Try this code: 
<div class="container my-5">
<div class="row">
<div class="col-12 my-4">
<div class="card card-cascade narrower">
<div class="view view-cascade gradient-card-header blue darken-2">
<h2 class="card-header-title">Test</h2>
</div>
<a class="btn-floating btn-action ml-auto mdb-color lighten-3" style="margin-right: 3.5rem;"><i class="fa fa-chevron-right pl-1"></i></a>
<div class="card-body text-center">
<p>body</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card-columns">
<div class="card card-cascade narrower">
<div class="view view-cascade gradient-card-header blue darken-2">
<h2 class="card-header-title">Test</h2>
</div>
<a class="btn-floating btn-action float-right mr-4 mdb-color lighten-3"><i class="fa fa-chevron-right pl-1"></i></a>
<div class="card-body text-center">
<p>body</p>
</div>
</div>
<div class="card card-cascade narrower">
<div class="view view-cascade gradient-card-header blue darken-2">
<h2 class="card-header-title">Test</h2>
</div>
<a class="btn-floating btn-action float-right mr-4 mdb-color lighten-3"><i class="fa fa-chevron-right pl-1"></i></a>
<div class="card-body text-center">
<p>body</p>
</div>
</div>
<div class="card card-cascade narrower">
<div class="view view-cascade gradient-card-header blue darken-2">
<h2 class="card-header-title">Test</h2>
</div>
<a class="btn-floating btn-action float-right mr-4 mdb-color lighten-3"><i class="fa fa-chevron-right pl-1"></i></a>
<div class="card-body text-center">
<p>body</p>
</div>
</div>
</div>
</div>
</div>
</div>
Best, Marta

yddap17 pro commented 6 years ago

Perfect Solution! Thank you very much

Marta Szymanska staff pro premium commented 6 years ago

You're welcome.
Write
Create snippet
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 jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
About author
yddap17
Pro User
15Support score
4Questions 2Answers
0Snippets likes 1Snippets