Topic: Flipping cards broke in MDB-Pro 6.1.1
Jan Louw
pro
asked 6 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
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