mat-table columns width not changing when they contain an Input

Question

I'm trying to make an Angular component to both display data and receive data. I made a mat-table with input type form fields and the regular data display with {{element.value}}. And I set up the width of each column diffrently like this :

.mat-column-v{
  width: 32%!important;
}

.mat-column-w{
  width: 17%!important;
}

.mat-column-x{
  width: 17%!important;
}

.mat-column-y{
  width: 17%!important;
}

.mat-column-z{
  width: 17%!important;
}

My problem is that when I use the input mode the width of the columns isnt set correctly. On the other hand the output mode works correctly as show in this picture:

I had to cover the information but on the right is the input mode with the 1st column having a kind of random width and on the left the output mode where the width is set correctly.

My component's code :

  <table mat-table [dataSource]="data">
    <!-- v Column -->
    <ng-container matColumnDef="v">
      <th mat-header-cell *matHeaderCellDef> v </th>
      <td mat-cell *matCellDef="let element"> {{element.v}} </td>
    </ng-container>

    <!-- w Column -->
    <ng-container matColumnDef="w">
      <th mat-header-cell *matHeaderCellDef> w </th>
      <td mat-cell *matCellDef="let element">
        <ng-container *ngIf="type == 'input'">
           <mat-form-field>
            <input matInput [value]="element.w" [(ngModel)]="element.w">
           </mat-form-field>
        </ng-container>
       <ng-container *ngIf="type == 'output'"> {{element.w}} </ng-container>
     </td>
    </ng-container>

    <!-- x Column -->
    <ng-container matColumnDef="x">
      <th mat-header-cell *matHeaderCellDef> x </th>
      <td mat-cell *matCellDef="let element">
         <ng-container *ngIf="type == 'input'">
           <mat-form-field>
             <input matInput [value]="element.x" [(ngModel)]="element.x">
           </mat-form-field>
         </ng-container>
        <ng-container *ngIf="type == 'output'"> {{element.x}} </ng-container>
      </td>
    </ng-container>

    <!-- y Column -->
    <ng-container matColumnDef="y">
      <th mat-header-cell *matHeaderCellDef> y </th>
      <td mat-cell *matCellDef="let element">
         <ng-container *ngIf="type == 'input'">
           <mat-form-field>
             <input matInput [value]="element.y" [(ngModel)]="element.y">
           </mat-form-field>
         </ng-container>
        <ng-container *ngIf="type == 'output'"> {{element.y}} </ng-container>
      </td>
    </ng-container>

    <!-- z Column -->
    <ng-container matColumnDef="z">
      <th mat-header-cell *matHeaderCellDef> z </th>
      <td mat-cell *matCellDef="let element">
         <ng-container *ngIf="type == 'input'">
           <mat-form-field>
             <input matInput [value]="element.z" [(ngModel)]="element.z">
           </mat-form-field>
         </ng-container>
        <ng-container *ngIf="type == 'output'"> {{element.z}} </ng-container>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="heads"></tr>
    <tr mat-row *matRowDef="let row; columns: heads;"></tr>
  </table>

My component's CSS :

table {
  width: 100%;
}

.mat-form-field {
  font-size: 14px;
  width: 90%;
}

.mat-column-v{
  width: 32%!important;
}

.mat-column-w{
  width: 17%!important;
}

.mat-column-x{
  width: 17%!important;
}

.mat-column-y{
  width: 17%!important;
}

.mat-column-z{
  width: 17%!important;
}

How do I set the 1st column size in the table containing inputs just like the other one ?

Answer 1

You can check the complete demo here

I have added a toggle on the top, so that you can check the exact impact which you are aiming for...

we had to over-write the default width for the input which was set to 180px... we did that using the css below:

::ng-deep .mat-column-w div.mat-form-field-infix,
::ng-deep .mat-column-x div.mat-form-field-infix,
::ng-deep .mat-column-y div.mat-form-field-infix,
::ng-deep .mat-column-z div.mat-form-field-infix { width: 17% !important; }