I am designing a signup page and I need to include a material card below the password field with checkboxes for password requirements.
The challenge is that when the card appears, it pushes down all other elements such as the sign-up button. I want the card to float on top without affecting the layout of other content.
HTML:-
<div class="sign-in-box row">
<div class="row">
<div class="sign-in-text">Sign Up</div>
</div>
<!-- input form -->
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<div>
<!-- Name Name -->
<div class="input-field row">
<div class="col">
<mat-form-field appearance="outline">
<mat-label>First Name</mat-label>
<input matInput formControlName="fName" required />
</mat-form-field>
</div>
<div class="col">
<mat-form-field appearance="outline">
<mat-label>Last Name</mat-label>
<input matInput formControlName="lName" required />
</mat-form-field>
</div>
</div>
<!-- email -->
<div class="input-field">
<mat-form-field appearance="outline">
<mat-label>Email Address</mat-label>
<input matInput formControlName="email" required />
</mat-form-field>
</div>
<!-- password -->
<div>
<mat-form-field appearance="outline">
<mat-label>Password </mat-label>
<input
matInput
[type]="hidePassword ? 'password' : 'text'"
(focus)="onFocusChange()"
(blur)="onFocusChange()"
formControlName="password"
required
/>
</mat-form-field>
</div>
<!-- Password hints -->
<div *ngIf="showPasswordDetails" class="on-top">
<mat-card>
<mat-card-header>
<mat-card-title>Password Requirements</mat-card-title>
</mat-card-header>
<div>
<mat-card-content>
Password must contain 8 characters <br />
Password must contain Upper Case Character <br />
Password must contain Lower Case Character<br />
Password must contain Number <br />
</mat-card-content>
</div>
<mat-card-actions>
<button mat-button>LIKE</button>
<button mat-button>SHARE</button>
</mat-card-actions>
</mat-card>
</div>
</div>
<!-- remember me box -->
<mat-checkbox >Remember Me</mat-checkbox>
<!-- Sign In Button -->
<div class="sign-in-container">
<button mat-raised-button color="primary">
Sign In
</button>
</div>
</form>
<!-- forgot password and signup -->
<div class="forgot-password-signup">
<a href="">Forgot Password?</a>
<a href="">Dont Have an Account? Sign Up</a>
</div>
</div>
SCSS:-
.sign-in-box {
margin: 5% 10%;
height: 75%;
width: 80%;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
}
.icon-background {
margin: auto;
background-color: #f48fb1;
padding: 0;
border-radius: 50%;
width: 50px;
height: 50px;
align-items: center;
display: flex;
}
.icon-row {
padding: 10px;
}
.sign-in-text {
width: fit-content;
margin: auto;
font-size: 1.5em;
}
.input-field {
width: inherit;
margin: 5% 0;
}
.sign-in-container {
margin: 5% 0 0 0;
}
.forgot-password-signup {
margin-top: 10px;
display: flex;
justify-content: space-between;
}
.on-top {
z-index: 100;
}
.width--inherit {
width: inherit;
}
If you are facing issues with the positioning of the card, you can refer to this Stackblitz demo https://stackblitz.com/edit/angular-9-material-starter-wk73w3.io for assistance. Just enter the first name and last name, and notice how the password field affects the layout when clicked on.
Your cooperation is highly appreciated.