Rotating card height

Topic: Rotating card height

jouvrard pro asked 6 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://mdbcdn.b-cdn.net/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 6 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

Huichofer pro answered 6 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:

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

jouvrard pro answered 6 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

Marta Szymanska staff pro premium answered 6 years ago