Topic: Problem in flipping card
I have problem in flipping card, height of flipping is fixed and when i adding the date picker in flipping card then it showing the mirror view of flipping card in back side. You can see the screen shot in given link https://ibb.co/eRtM9m
<mdb-card-rotating #cards>
<!--Front Side-->
<div class="face front tp-box_side tp-box_front" style="height: auto;">
<div class="card">
<div class="card-body">
<h4><u>Personal Information:</u> <a *ngIf="sessionUser && user && sessionUser.id==user.id" (click)="cards.toggle()" class="float-right"><i class="fa fa-pencil" aria-hidden="true"></i></a></h4>
<div>
<div class="row">
<div class="col-md-6 mt-4">
<div class="row">
<div class="col-md-6">
<strong>First Name:</strong>
</div>
<div class="col-md-6">
{{user.first_name}}
</div>
</div>
</div>
<div class="col-md-6 mt-4">
<div class="row">
<div class="col-md-6">
<strong>Middle Name:</strong>
</div>
<div class="col-md-6">
{{user.middle_name}}
</div>
</div>
</div>
<div class="col-md-6 mt-4">
<div class="row">
<div class="col-md-6">
<strong>Last Name:</strong>
</div>
<div class="col-md-6">
{{user.last_name}}
</div>
</div>
</div>
<div class="col-md-6 mt-4">
<div class="row">
<div class="col-md-6">
<strong>Gender:</strong>
</div>
<div class="col-md-6">
{{user.gender}}
</div>
</div>
</div>
<div class="col-md-6 mt-4">
<div class="row">
<div class="col-md-6">
<strong>Father's Name:</strong>
</div>
<div class="col-md-6">
{{user.fname}}
</div>
</div>
</div>
<div class="col-md-6 mt-4">
<div class="row">
<div class="col-md-6">
<strong>Mother's Name:</strong>
</div>
<div class="col-md-6">
{{user.mname}}
</div>
</div>
</div>
<div class="col-md-6 mt-4">
<div class="row">
<div class="col-md-6">
<strong>Date of Birth:</strong>
</div>
<div class="col-md-6">
{{user.dob | date: 'mediumDate'}}
</div>
</div>
</div>
<div class="col-md-6 mt-4">
<div class="row">
<div class="col-md-6">
<strong>Social Status:</strong>
</div>
<div class="col-md-6">
{{user.social_status}}
</div>
</div>
</div>
<div class="col-md-6 mt-4">
<div class="row">
<div class="col-md-6">
<strong>Email-Id:</strong>
</div>
<div class="col-md-6">
{{user.email}}
</div>
</div>
</div>
<div class="col-md-6 mt-4">
<div class="row">
<div class="col-md-6">
<strong>Date of Membership:</strong>
</div>
<div class="col-md-6">
{{user.dom | date: 'mediumDate'}}
</div>
</div>
</div>
<div class="col-md-6 mt-4">
<div class="row">
<div class="col-md-6">
<strong>Spouse Phone:</strong>
</div>
<div class="col-md-6">
{{user.spoce_phone}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Back Side-->
<div class="back tp-box_side tp-box_back" *ngIf="sessionUser && user && sessionUser.id==user.id" style="height: auto;padding: 0;">
<div class="card">
<div class="card-body">
<h4><u>Edit Personal Information:</u> <a (click)="cards.toggle()" class="float-right"><i class="fa fa-close" aria-hidden="true"></i></a></h4>
<div>
<form [formGroup]="userEdit" (ngSubmit)="edituser()">
<div class="row">
<div class="col-md-6">
<div class="md-form">
<input mdbActive formControlName="first_name" type="text" id="first_name" class="form-control" [ngClass]="userEdit.controls['first_name'].invalid && userEdit.controls['first_name'].touched ? 'invalid': 'valid'" [ngClass]="userEdit.controls['first_name'].invalid && userEdit.controls['first_name'].touched ? 'invalid': 'valid'">
<label for="first_name" class="">first_name</label>
</div>
</div>
<div class="col-md-6">
<div class="md-form">
<input mdbActive formControlName="middle_name" type="text" id="middle_name" class="form-control" [ngClass]="userEdit.controls['middle_name'].invalid && userEdit.controls['middle_name'].touched ? 'invalid': 'valid'" [ngClass]="userEdit.controls['middle_name'].invalid && userEdit.controls['middle_name'].touched ? 'invalid': 'valid'">
<label for="middle_name" class="">Middle Name</label>
</div>
</div>
<div class="col-md-6">
<div class="md-form">
<input mdbActive formControlName="last_name" type="text" id="last_name" class="form-control" [ngClass]="userEdit.controls['last_name'].invalid && userEdit.controls['last_name'].touched ? 'invalid': 'valid'" [ngClass]="userEdit.controls['last_name'].invalid && userEdit.controls['last_name'].touched ? 'invalid': 'valid'">
<label for="last_name" class="">Last Name</label>
</div>
</div>
<div class="col-md-6">
<div>
<mdb-select [options]="gender" placeholder="Choose your option" formControlName="gender" class="form-control" [ngClass]="userEdit.controls['gender'].invalid && userEdit.controls['gender'].touched ? 'invalid': 'valid'"></mdb-select>
<label>Gender</label>
</div>
</div>
<div class="col-md-6">
<div class="md-form">
<input mdbActive formControlName="fname" type="text" id="fname" class="form-control" [ngClass]="userEdit.controls['fname'].invalid && userEdit.controls['fname'].touched ? 'invalid': 'valid'" [ngClass]="userEdit.controls['fname'].invalid && userEdit.controls['fname'].touched ? 'invalid': 'valid'">
<label for="fname" class="">Father's Name</label>
</div>
</div>
<div class="col-md-6">
<div class="md-form">
<input mdbActive formControlName="mname" type="text" id="mname" class="form-control" [ngClass]="userEdit.controls['mname'].invalid && userEdit.controls['mname'].touched ? 'invalid': 'valid'" [ngClass]="userEdit.controls['mname'].invalid && userEdit.controls['mname'].touched ? 'invalid': 'valid'">
<label for="mname" class="">Mother's Name</label>
</div>
</div>
<div class="col-md-6">
<div class="md-form">
<mdb-date-picker formControlName="dob" [options]="dobOption" placeholder="Selected date"></mdb-date-picker>
</div>
</div>
<div class="col-md-6">
<div class="md-form">
<mdb-select [options]="social_status" placeholder="Choose your option" formControlName="social_status" class="form-control" [ngClass]="userEdit.controls['social_status'].invalid && userEdit.controls['social_status'].touched ? 'invalid': 'valid'"></mdb-select>
<label>Social Status</label>
</div>
</div>
<div class="col-md-6">
<div class="md-form">
<input mdbActive formControlName="email" type="text" id="email" class="form-control" [ngClass]="userEdit.controls['email'].invalid && userEdit.controls['email'].touched ? 'invalid': 'valid'" [ngClass]="userEdit.controls['email'].invalid && userEdit.controls['email'].touched ? 'invalid': 'valid'">
<label for="email" class="">Email-Id</label>
</div>
</div>
<div class="col-md-6">
<div class="md-form">
<mdb-date-picker formControlName="dom" [options]="domOption" placeholder="Selected date"></mdb-date-picker>
</div>
</div>
<div class="col-md-6">
<div class="md-form">
<input mdbActive formControlName="spoce_phone" type="text" id="spoce_phone" class="form-control" [ngClass]="userEdit.controls['spoce_phone'].invalid && userEdit.controls['spoce_phone'].touched ? 'invalid': 'valid'" [ngClass]="userEdit.controls['spoce_phone'].invalid && userEdit.controls['spoce_phone'].touched ? 'invalid': 'valid'">
<label for="spoce_phone" class="">Spouse Phone</label>
</div>
</div>
<div class="col-md-6">
<button type="submit" class="btn btn-md btn-primary btn-rounded waves-light float-right" [disabled]="!userEdit.valid" mdbRippleRadius>SUBMIT</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!--/.Back Side-->
</mdb-card-rotating>
Damian Gemza staff commented 6 years ago
Hi sdhakad, Could you provide me your's whole project without node_modules directory to my email? Add it to archive like .rar or .zip and send to address: d.gemza@mdbootstrap.com Best Regards, DamianFREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: Yes
Tags
Dawid Adach pro commented 6 years ago
Could you please share your code?