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

Marta Wierzbicka staff answered 6 years ago


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

jouvrard pro answered 6 years ago


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.

Huichofer pro answered 6 years ago


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.  

Please insert min. 20 characters.

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