I am new to angular flex layout and working on angular 2 applications using flex layout.
I am trying to build a simple login page as shown below.
Below shown is my myform.component.html
<mat-toolbar color="primary" ><span class="span">SPACE STUDY</span></mat-toolbar>
<div class="card-container">
<mat-card class="card-content">
<form (ngSubmit)="onSubmit(user.username,user.password)" #myForm="ngForm" class="form-elements">
<br/>
<mat-icon style="-webkit-text-fill-color:#6A5ACD">account_circle</mat-icon><br/>
<p>LOGIN</p>
<mat-input-container class="form-row">
<span matTooltip="Username">
<input matInput placeholder=" " id="username" [(ngModel)]="user.username" name="username">
</span>
<span matPrefix><mat-icon style="color: black;"></mat-icon></span>
</mat-input-container>
<mat-input-container class="form-row">
<span matTooltip="Password">
<input matInput placeholder=" " id="password" [(ngModel)]="user.password" name="gpassword" [type]="hide ? 'password' : 'text'">
</span>
<span matPrefix><mat-icon style="color: black;"></mat-icon></span>
</mat-input-container>
<div class="checkbox">
<mat-checkbox>REMEMBER ME</mat-checkbox>
</div><br/>
<button mat-raised-button color="primary" type="submit" mat-raised-button style="border-radius:15px;max-height:6vh;">Login</button>
<mat-progress-bar mode="indeterminate" *ngIf="showprogressbar"></mat-progress-bar>
</form>
</mat-card>
</div>
Below shown is my myform.component.css
.mat-toolbar{
display: flex;
align-items: center;
justify-content: center;
height: 35vh;
}
.span{
font-family: Verdana, sans-serif;
font-weight:bold;
font-size:16px;
}
.card-container {
background-color: white;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.card-content {
background-color: white;
display: flex;
min-width:70vh;
align-content: stretch;
align-items: center;
justify-content: center;
border-radius: 2px;
}
.form-elements{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.mat-icon {
transform: scale(4);
}
.form-row{
align-content: stretch;
}
.checkbox{
display: flex;
flex-direction: column;
font-family: Verdana, sans-serif;
font-weight:bold;
font-size:12px;
}
Below is my actual output window
As you can see above i want to take half of my form card over the mat-toolbar component.
I tried using padding and margin but its not giving me proper alignment.Can anybody please help me to align my form card as same in the first picture.
Also i tried applying stretch property to the mat-input-container to stretch the form input lines,but its not working..
please help me how to apply flex CSS to achieve my requirement..