As someone new to UI development and lacking in-depth knowledge of css, I have been searching for examples to style a login page using Angular Material. My main struggle right now is getting the form fields to expand the width of the card (minus the padding), but so far I haven't been successful.
Could someone guide me on how my form fields should be styled? Additionally, I've noticed that many styles include "example-" in their name. Are these supposed to be defined in my css file?
Below is an excerpt from my stylesheet:
.example-icon {
padding: 0 14px;
}
.example-spacer {
flex: 1 1 auto;
}
.example-card {
max-width: 400px;
width: 75%;
margin: 10px auto;
}
.example-header-image {
background-image: image("./assets/logo.png");
background-size: cover;
}
.main-div {
height: 50vh;
display: flex;
justify-content: center;
align-items: center;
}
And here is a snippet of the html page:
<div class="main-div">
<mat-card class="example-card">
<mat-card-header>
<img mat-card-avatar src="./assets/logo.png">
<mat-card-title>Login</mat-card-title>
</mat-card-header>
<mat-card-content>
<form class="example-form">
<table class="example-full-width" cellspacing="0">
<tr>
<td>
<mat-form-field class="example-full-width">
<input matInput placeholder="Username" [(ngModel)]="username" name="username" required>
</mat-form-field>
</td>
</tr>
<tr>
<td>
<mat-form-field class="example-full-width">
<input matInput placeholder="Password" [(ngModel)]="password" type="password" name="password" required>
</mat-form-field>
</td>
</tr>
</table>
</form>
<mat-spinner [style.display]="showSpinner ? 'block' : 'none'"></mat-spinner>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button (click)="login()" color="primary">Login</button>
</mat-card-actions>
</mat-card>
</div>