Flipping cards broke in MDB-Pro 6.1.1

<mdb-card-rotating #card class="px-1">
 <!--Front Side-->
 <div class="face front tp-box_side tp-box_front" >
 <!--Content-->
 <div class="card-body p-1 h-100 d-flex flex-column justify-content-start">
 <h4 class="card-title"><a (click)="AppDetails(cardrow.appname)" mdbRippleRadius>{{cardrow.appdesc}}</a></h4>
 <hr>
 <p>Overview of {{cardrow.appname}} Databases</p>
 <!--Table-->
 <table class="table table-sm">
 <!--Table head-->
 <thead>
 <tr>
 <th>DBNAME</th>
 <th>DBSIZE</th>
 <th>STATUS</th>
 </tr>
 </thead>
 <!--Table head-->
 <!--Table body-->
 <tbody *ngFor="let row of cardrow.dbs; let i = index">
 <tr>
 <td><a data-card="card-1" (click)="rowClicked(i)">{{row.name}}</a></td>
 <td>{{row.dbsize}} </td>
 <td [ngStyle]="{'color': 'green'}" *ngIf="row.dbstate=='1'; else errblk"><span class="badge badge-pill green">Active</span></td>
 <ng-template #errblk><td [ngStyle]="{'color': 'red'}"><a (click)='errMsg(row.name)'><span class="badge badge-pill red">Unknown</span></a></td></ng-template>
 </tr>
 </tbody>
 <!--Table body-->
 </table>
 <!--Table-->
 </div>
 </div>
 <!--/.Front Side-->
 <!--Back Side-->
 <div class="back tp-box_side tp-box_back" >
 <!--Content-->
 <div class="card-body p-1 h-100 d-flex flex-column justify-content-start">
 <h4>Summary: {{selApp}} <span>(<a (click)="dbDetails(selApp,selAppDB)">{{selAppDB}}</a>)</span></h4>
 <hr>
 <p *ngIf="kpis?.length==0">Display summary KPI's for database {{selAppDB}}</p>
 <div *ngIf="kpis?.length>0">
 <div *ngFor="let head of kpis; let x = index">
 <p class="my-1" *ngIf="head[0] | nohead:'^OTHER[0-9]*'">{{head[0]}}</p>
 <!--Table-->
 <table class="table table-sm my-0">
 <!--Table head-->
 <thead>
 <tr>
 <th *ngIf="kpis[x][1][0].krg=='1'"></th>
 <th *ngFor="let row of kpis[x][1]">{{row.name}}<span *ngIf="row.metric!='null'">({{row.metric}})</span></th>
 </tr>
 </thead>
 <!--Table head-->
 <!--Table body-->
 <tbody>
 <tr *ngIf="kpis[x][1][0].krg=='1';else nocell">
 <td><a *ngIf="selSpaceid!='no_space'" data-card="card-1" (click)="graphDisplay(selSpaceid)"><i class="fa fa-bar-chart" aria-hidden="true"></i></a></td>
 <!--<i class="material-icons">equalizer</i>-->
 <td *ngFor="let row of kpis[x][1];">{{row.value}}</td>
 </tr>
 <ng-template #nocell><td *ngFor="let row of kpis[x][1]; let ix=index;"><span class="badge badge-pill badge-info">{{row.value}}</span></td></ng-template>
 <!--<ng-template #nocell><td *ngFor="let row of kpis[x].kpielms; let ix=index;"><a (click)="graphDisplay(x,ix)"><span class="badge badge-pill badge-info">{{row.value}}</span></a></td></ng-template>-->
 </tbody>
 <!--Table body-->
 </table>
 <!--Table-->
 </div>
 </div>
 <!--Triggering button-->
 <a class="rotate-btn my-0" data-card="card-1" (click)="cards.toggle()"><i class="fa fa-undo"></i> Overview</a>
 <div class="h-100 ml-auto d-flex flex-column justify-content-end"><small><a (click)='errMsg(cardrow?.appname)'>{{selChanged}}</a></small></div>
 </div>
 </div>
 <!--/.Back Side-->
</mdb-card-rotating>
<!--/.Rotating card-->