Strange behaviour with Action button and cards in Card-colum

Topic: Strange behaviour with Action button and cards in Card-columns

yddap17 pro asked 5 years ago

Hi there,

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

This is the according code:

</div>

</div>

</div>

</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?

Add comment

Marta Wierzbicka staff answered 5 years ago

0 0 Best answer

Hi,

if you replace the <code>.ml-auto</code> class within card-columns with the <code>.float-right</code> class, it will be a fine solution for you?

Try this code:
<pre><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></pre>
Best,

Marta

Please insert min. 20 characters.

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 5 years ago

Perfect Solution! Thank you very much

Marta Wierzbicka staff commented 5 years ago

You're welcome.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: Yes

yddap17

Pro User 15Support score
4Questions 2Answers 1Snippets