Topic: Flipping cards broke in MDB-Pro 6.1.1

Jan Louw pro asked 5 years ago


Hi, After upgrading to 6.1.1, the "Flipping card" extended component does not work. The "front" and "flipside" of the card is being displayed.
<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-->
Please assist. Regards Jan

killbox pro commented 5 years ago

I tried your markup, worked well once I adjusted your "Tirggering button" click event from cards.toggle() to card.toggle(), so it's likely either that or a missing or errant style requirement. Here's your markup back, I replaced all of your interpolation with nonsense just to make it buildable.. so ignore those pieces. <pre> <div> <div><mdb-card-rotating #card class="px-1"></div> <div><divclass="face front tp-box_side tp-box_front"></div> <div><divclass="card-body p-1 h-100 d-flex flex-column justify-content-start"></div> <div><h4class="card-title">EvilCorp</h4></div> <div><hr></div> <div><p>Overview of Databases</p></div> <div><p><small>click row to rotate card</small></p></div> <div><tableclass="table table-sm"></div> <div><thead></div> <div><tr></div> <div><th>DBNAME</th></div> <div><th>DBSIZE</th></div> <div><th>STATUS</th></div> <div></tr></div> <div></thead></div> <div><tbody></div> <div><tr (click)="card.toggle()"></div> <div><td><adata-card="card-1">farm</a></td></div> <div><td>6 meeeelion MB </td></div> <div><td [ngStyle]="{'color': 'green'}"><spanclass="badge badge-pill green">Active</span></td></div> <div></tr></div> <div></tbody></div> <div></table></div> <div></div></div> <div></div></div> <div><divclass="back tp-box_side tp-box_back"></div> <div><divclass="card-body p-1 h-100 d-flex flex-column justify-content-start"></div> <div><h4>Summary: </h4></div> <div><hr></div> <div><p>Display summary KPI's for cow database</p></div> <div><div></div> <div><pclass="my-1">moo</p></div> <div><tableclass="table table-sm my-0"></div> <div><thead></div> <div><tr></div> <div><th>Stats</th></div> <div><th>Sounds</th></div> <div><th>Activities</th></div> <div></tr></div> <div></thead></div> <div><tbody></div> <div><tr></div> <div><td><adata-card="card-1"><iclass="fa fa-bar-chart"aria-hidden="true"></i></a></td></div> <div><td>moo</td></div> <div><td>eats grass, tips over</td></div> <div></tr></div> <div><ng-template #nocell><td><spanclass="badge badge-pill badge-info">meow?</span></td></ng-template></div> <div></tbody></div> <div></table></div> <div></div></div> <div><aclass="rotate-btn my-0"data-card="card-1" (click)="card.toggle()"><iclass="fa fa-undo"></i> Overview</a></div> <div><divclass="h-100 ml-auto d-flex flex-column justify-content-end"><small>i love lamp</small></div></div> <div></div></div> <div></div></div> <div></mdb-card-rotating></div> </div> </pre>

killbox pro commented 5 years ago

wow - not sure why the code is displaying like that - here's a link to the same --> https://pastebin.com/mgRA5FSC

Damian Gemza staff commented 5 years ago

Dear killbox, I've copied the code from your raw and again everything is okay. Card flips after clicking on it, and only 1 side at the moment is visible. Are you importing a right module in your app.module.ts file? In 6.1.1 release you have to import MDBBootstrapModulesPro or CardsModule if you need to use only flipping cards. Best Regards, Damian

Jan Louw pro commented 5 years ago

Hi Damian, That was the issue - did not import the right Modules for the new release of MDB-Pro. Do you have a reference to what needs to changes from 6.02 to 6.1.1? Regards Jan

Damian Gemza staff commented 5 years ago

Here's described the migration process: https://mdbootstrap.com/angular/migration-instructions/ Best Regards, Damian

Jan Louw pro commented 5 years ago

Damian, thank you for assisting. Regards, Jan

FREE CONSULTATION

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

Status

Closed

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags