Currently, I am working on a project using Angular material, where I have a component.html file that defines a form and a table with data.
In the first image of my project, you can see the tab title, a form to add new records, and the table displaying existing records. My goal is to achieve a layout similar to the second image, where the components overlap each other.
Here is how my window looks like currently:
https://i.sstatic.net/Y0GQd.jpg
Desired outcome:
https://i.sstatic.net/eD4aD.jpg
This is the content of my component.html file:
<div class="title">Customer registration</div>
<mat-divider></mat-divider>
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>New</mat-expansion-panel-header>
<form [formGroup]="formNew">
<mat-grid-list cols="4" rowHeight="50px" gutterSize="10px">
<mat-grid-tile>
<mat-form-field fxFlex>
<input matInput placeholder="ID" formControlName="id">
</mat-form-field>
</mat-grid-tile>
<mat-grid-tile>
<mat-form-field fxFlex>
<input matInput placeholder="First Name" formControlName="first_name">
<mat-icon matSuffix>person_outline</mat-icon>
</mat-form-field>
</mat-grid-tile>
<mat-grid-tile>
<mat-form-field fxFlex>
<input matInput placeholder="Last Name" formControlName="last_name">
</mat-form-field>
</mat-grid-tile>
<mat-grid-tile>
<mat-form-field fxFlex>
<input matInput placeholder="Phone" formControlName="phone">
</mat-form-field>
</mat-grid-tile>
<mat-grid-tile>
<div>
<button mat-stroked-button (click)="save()">Add</button>
</div>
</mat-grid-tile>
</mat-grid-list>
</form>
</mat-expansion-panel>
</mat-accordion>
<mat-card class="mat-elevation-z8">
<mat-table [dataSource]="customers">
<ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef>ID</mat-header-cell>
<mat-cell *matCellDef="let customers"> {{customers.id}} </mat-cell>
</ng-container>
<ng-container matColumnDef="nombre">
<mat-header-cell *matHeaderCellDef>First Name</mat-header-cell>
<mat-cell *matCellDef="let customers"> {{customers.first}} </mat-cell>
</ng-container>
<ng-container matColumnDef="apellido">
<mat-header-cell *matHeaderCellDef>Last Name</mat-header-cell>
<mat-cell *matCellDef="let customers"> {{customers.last}} </mat-cell>
</ng-container>
<ng-container matColumnDef="telf">
<mat-header-cell *matHeaderCellDef>Phone</mat-header-cell>
<mat-cell *matCellDef="let customers"> {{customers.phone}} </mat-cell>
</ng-container>
<ng-container matColumnDef="act">
<mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
<mat-cell *matCellDef="let row">
<button mat-button><mat-icon>edit</mat-icon></button>
<button mat-button><mat-icon>delete_forever</mat-icon></button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</mat-card>
The Challenge: How can I adjust the layout to make different elements overlap each other as shown in the reference photo?