flexLayout div with full width-CodePudding

I have a form this form takes up 1/3 of the screen adjacent to the left , so ı want to this form display with full width (occupy the entire screen from left to right.). I searched on google and tried some methods which are width : 100% , fxFlexFill, (fxLayout="column" fxLayoutAlign=" stretch"), fxFlexs .Maybe i used them wrong . I couldn't do it in any way.

calander 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" >
      <!-- 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>statu</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  type="submit" color="accent">
      Send
    </button>
  </div>
</form>

calander 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;
}

CodePudding user response：

What exactly should take up the whole screen? If you want the three input fields to stretch to the far right, you can change

<div fxLayout="row" style="background-color: white">

to 

<div fxLayout="row" id="row" style="background-color: white; display: flex">

CodePudding user response：

I think that could help you https://tburleson-layouts-demos.firebaseapp.com/#/docs

They said : "Using 'fxFill' to fill available width and height of parent container"

So ... you must have the size of the parent at 100%.