Topic: flipping card height

moulot priority asked 4 years ago

hello i setup the height of flipping card like this: const cardWrapper = this.el.nativeElement.querySelectorAll('.card-wrapper'); this.renderer.setStyle(cardWrapper[0], 'height', '275px'); but i would like the height to be dynamic and grow as the text in it is bigger. i don't know the size in advance of the content of the card. thank you

Arkadiusz Idzikowski staff answered 4 years ago

You can use MutationObserver to listen to the change in the card content and then update the height accordingly. Here is an example code:


<!--Rotating card-->
<div class="col-md-4">
  <mdb-flipping-card #cards>
    <!--Front Side-->
    <div class="face front tp-box_side tp-box_front">

      <!-- Image-->
      <div class="card-up">
        <img src="" class="img-fluid">
      <div class="avatar">
        <img src="" class="rounded-circle img-responsive">
      <div class="card-body">
        <h4>Jonathan Doe</h4>
        <p>Web developer</p>
        <!--Triggering button-->
        <a class="rotate-btn" data-card="card-1" (click)="cards.toggle()">
          <mdb-icon fas icon="redo"></mdb-icon> Click here to rotate</a>
          <p *ngIf="showText">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio porro iure, asperiores explicabo recusandae magni possimus aut dicta, necessitatibus molestiae, numquam mollitia expedita minus voluptatibus quo! Beatae molestiae iusto harum.</p>
    <!--/.Front Side-->

    <!--Back Side-->
    <div class="back tp-box_side tp-box_back">

      <h4>About me</h4>
      <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
      <!--Social Icons-->
      <ul class="list-inline">
        <li class="list-inline-item">
          <a class="icons-sm fb-ic">
            <mdb-icon fab icon="facebook-f"></mdb-icon>
        <li class="list-inline-item">
          <a class="icons-sm tw-ic">
            <mdb-icon fab icon="twitter"></mdb-icon>
        <li class="list-inline-item">
          <a class="icons-sm gplus-ic">
            <mdb-icon fab icon="google-plus"></mdb-icon>
        <li class="list-inline-item">
          <a class="icons-sm li-ic">
            <mdb-icon fab icon="linkedin-in"></mdb-icon>
      <!--Triggering button-->
      <a class="rotate-btn" data-card="card-1" (click)="cards.toggle()">
        <mdb-icon fas icon="undo"></mdb-icon> Click here to rotate back</a>

    <!--/.Back Side-->
<!--/.Rotating card-->


  showText = false;

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  ngOnInit(): void {
    const cardHeight = 500;
    const cardWrapper = this.el.nativeElement.querySelectorAll('.card-wrapper');
    const cardBody = cardWrapper[0].querySelector('.card-body');

    const observer = new MutationObserver((mutations: MutationRecord[]) => {
      mutations.forEach(() => {
        const updatedHeight = cardHeight + cardBody.offsetHeight;
        this.renderer.setStyle(cardWrapper[0], 'height', updatedHeight + 'px');

    observer.observe(cardBody, {
      attributes: true,
      childList: true,
      characterData: true,

    setTimeout(() => {
      this.showText = true;
    }, 2000);

ewgiddings free commented 4 years ago

@Arkadiusz Idzikowski

I get the error "Cannot read property 'offsetHeight' of null" when I try to get the offset height of .card-body. I am wondering if card-body class exists on my version 8.6 of the flipping card? Do you know if the class is different or why I would get that otherwise?

ewgiddings free commented 4 years ago

Oh. The example for the card I used in the docs doesn't have a card-body class it has a content class.

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 8.8.1
  • Device: dell notebook
  • Browser: chrome
  • OS: windows 10
  • Provided sample code: No
  • Provided link: No