Rotating card height

Topic: Rotating card height

jouvrard pro asked 5 years ago

Hello, I try to use the rotating cards but my problem is it seems that the card height is fixed and if I have to many information inside, my content overflows. Is there a solution? Here is my code:

<div class="card-wrapper">
<div class="card-rotating effect__click text-center h-100 w-100" id="card-1">

<!--Front Side-->
<div class="face front white">

<!-- Image-->
<div class="card-up bg-antenna">

</div>
<!--Avatar-->
<div class="avatar mx-auto">
<img class="rounded-circle" alt="Sample avatar image." src="https://mdbootstrap.com/img/Photos/Avatars/img%20%289%29.jpg">
</div>
<!--Content-->
<div class="card-body">
<h4>Jonathan Doe</h4>
<p>Web developer</p>
<!--Triggering button-->
<a class="rotate-btn" data-card="card-1">
<i class="fa fa-repeat"></i> Click here to rotate</a>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
</div>
</div>
<!--/.Front Side-->

<!--Back Side-->
<div class="face back">

<div class="card-body">

<!--Content-->
<h4>About me</h4>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta.
Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum
repellendus, voluptatum eum, officia laudantium quaerat?
</p>
<hr>
<!--Social Icons-->
<ul class="list-inline">
<li class="list-inline-item">
<a class="fa-lg p-2 m-2 fb-ic">
<i class="fa fa-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a class="fa-lg p-2 m-2 tw-ic">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a class="fa-lg p-2 m-2 gplus-ic">
<i class="fa fa-google-plus"></i>
</a>
</li>
<li class="list-inline-item">
<a class="fa-lg p-2 m-2 li-ic">
<i class="fa fa-linkedin"></i>
</a>
</li>
</ul>
<!--Triggering button-->
<a class="rotate-btn" data-card="card-1">
<i class="fa fa-undo"></i> Click here to rotate back</a>

</div>

</div>
<!--/.Back Side-->

</div>
</div>

jouvrard pro commented 5 years ago

And I add that if I change the link to rotate the card with a "btn" class, there is a problem when the card rotate. The button is hidden very late. For example: Documents

Add comment

Marta Wierzbicka staff answered 5 years ago

0 0 Best answer

Hi guys, Thank you Huichofer for the solution. jouvrard, for sure, we will fix this. Best, Marta

Add comment

jouvrard pro answered 5 years ago

0 0 Best answer

Thank you very much, it works perfectly just with a little change in your code. You change the card-wrapper height with the card-body height but I have a card-up dans an avatar, so I must add 220px to le height, and all it's ok. :) Thank again! I hope the MDB team will fix this in the future.

Add comment

Huichofer pro answered 5 years ago

2 0 Best answer

Hi jouvard,

I ran into the same situation while working in a project, and I'll share with you how I fix it. Hopefully you'll find it useful.

I created a js function that takes the height of the front and the back card faces and applying the greatest of them to the card-wrapper div. So for your code I think it would look like this:
<pre class="code-toolbar grey lighten-2 p-3 mb-3">function AdjustCardWrapperMinHeight() {
  var frontHeight = $("#card-1").find("div.front:first").find(".card-body:first").height();
  var backHeight = $("#card-1").find("div.back:last").find(".card-body:first").height();
  var height = frontHeight;
  if (backHeight > height) {
    height = backHeight;
  }
  //My minimum height had to be 500.
  if (height < 500) {
    height = 500;
  }
  $("div.card-wrapper").css("min-height", height);
}</pre>
So you can call this function when the page loads and when clicking on your rotate trigger button; assuming is the anchor element with rotate-btn class, it would look like:
<pre class="code-toolbar grey lighten-2 p-3 mb-3">$("a.rotate-btn").on("click", function (e) {
  e.preventDefault();
  AdjustCardWrapperMinHeight();
});</pre>
Hope it helped you. Good luck with your project.

Please insert min. 20 characters.

Hi jouvard, I ran into the same situation while working in a project, and I'll share with you how I fix it. Hopefully you'll find it useful. I created a js function that takes the height of the front and the back card faces and applying the greatest of them to the card-wrapper div. So for your code I think it would look like this:

function AdjustCardWrapperMinHeight() {
  var frontHeight = $("#card-1").find("div.front:first").find(".card-body:first").height();
  var backHeight = $("#card-1").find("div.back:last").find(".card-body:first").height();
  var height = frontHeight;
  if (backHeight > height) {
    height = backHeight;
  }
  //My minimum height had to be 500.
  if (height < 500) {
    height = 500;
  }
  $("div.card-wrapper").css("min-height", height);
}

So you can call this function when the page loads and when clicking on your rotate trigger button; assuming is the anchor element with rotate-btn class, it would look like:

$("a.rotate-btn").on("click", function (e) {
  e.preventDefault();
  AdjustCardWrapperMinHeight();
});

Hope it helped you. Good luck with your project.

Add comment

Write

Create snippet

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: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: 4.5.9
Device: PC
Browser: All
OS: Windows 10
Provided sample code: No
Provided link: No

jouvrard

Pro User 898Support score
46Questions 70Answers 11Snippets