I am struggling to make a form occupy the entire screen width, adjacent to the left. I have tried various methods like setting width to 100%, using fxFlexFill, fxLayout and fxFlexs but couldn't achieve the desired result. Maybe I am implementing them incorrectly.
Calendar page:
<form [formGroup]="userForm" (ngSubmit)="sendRequest()">
<div fxLayout="row" style="background-color: white">
<div fxLayout="column" fxFlex="10">
<mat-form-field appearance="fill">
<mat-label>Date</mat-label>
<input
matInput
#pick
[matDatepicker]="picker"
(dateInput)="OnDateChange(pick)"
[min]="todayDate"
[max]="maxDate"
readonly
/>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker touchUi #picker [startAt]="todayDate"></mat-datepicker>
</mat-form-field>
</div>
<div fxLayout="column" fxFlex="15"></div>
<div fxLayout="column" fxFlex="30">
<mat-form-field appearance="fill">
<mat-label>Name</mat-label>
<input matInput formControlName="firstName" />
</mat-form-field>
</div>
<div fxLayout="column" fxFlex="15"></div>
<div fxLayout="column" fxFlex="30">
<mat-form-field appearance="fill">
<mat-label>Phone Number</mat-label>
<input matInput formControlName="phone" />
</mat-form-field>
</div>
<div></div>
</div>
<div fxLayout="row">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- hour Column -->
<ng-container matColumnDef="hour">
<th mat-header-cell *matHeaderCellDef>hour(90 min)</th>
<td mat-cell *matCellDef="let element">{{ element.hour }}</td>
</ng-container>
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef>No.</th>
<td mat-cell *matCellDef="let element">{{ element.position }}</td>
</ng-container>
<!-- Checkbox Column -->
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let row">
<mat-checkbox
(click)="$event.stopPropagation()"
*ngIf="row.statu == 'Open'"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)"
>
</mat-checkbox>
</td>
</ng-container>
<!-- statu Column -->
<ng-container matColumnDef="statu">
<th mat-header-cell *matHeaderCellDef>status</th>
<td mat-cell *matCellDef="let element">{{ element.statu }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr
mat-row
*matRowDef="let row; columns: displayedColumns"
(click)="selection.toggle(row)"
></tr>
</table>
</div>
<div>
<button mat-raised-button class="my-class" type="submit" color="accent">
Send
</button>
</div>
</form>
Calendar page CSS:
table {
width: 100%;
}
.example-form .mat-form-field + .mat-form-field {
margin-left: 8px;
}
.my-class{
margin-top: 10px;
width: 100%!important;
}
.mat-form-field-empty.mat-form-field-label {
color: green;
}
.mat-form-field-underline {
background-color: green;
}