Topic: Flipping cards broke in MDB-Pro 6.1.1
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
Closed
This topic is closed.
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
killbox pro commented 6 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 6 years ago
wow - not sure why the code is displaying like that - here's a link to the same --> https://pastebin.com/mgRA5FSCDamian Gemza staff commented 6 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, DamianJan Louw pro commented 6 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 JanDamian Gemza staff commented 6 years ago
Here's described the migration process: https://mdbootstrap.com/angular/migration-instructions/ Best Regards, DamianJan Louw pro commented 6 years ago
Damian, thank you for assisting. Regards, Jan