Merge pull request #2011 from vikashsprem/fix/responsie-design-viewport

Fix: Overflow in Navbar by Making Table Scrollable (To avoid overflow)
This commit is contained in:
Jose Alberto Hernandez
2024-03-03 23:04:41 -06:00
committed by GitHub
11 changed files with 34 additions and 28 deletions
@@ -14,7 +14,7 @@
</mat-form-field> </mat-form-field>
</div> </div>
<div class="mat-elevation-z8"> <div class="mat-elevation-z8 table-container">
<table mat-table [dataSource]="dataSource" matSort> <table mat-table [dataSource]="dataSource" matSort>
@@ -16,7 +16,7 @@
</mat-form-field> </mat-form-field>
</div> </div>
<div #chargesTable class="mat-elevation-z8"> <div #chargesTable class="mat-elevation-z8 table-container">
<table mat-table [dataSource]="dataSource" matSort> <table mat-table [dataSource]="dataSource" matSort>
@@ -1,7 +1,3 @@
.container{
width: 74rem;
}
table { table {
width: 100%; width: 100%;
@@ -9,3 +5,4 @@ table {
cursor: pointer; cursor: pointer;
} }
} }
@@ -16,7 +16,7 @@
</mat-form-field> </mat-form-field>
</div> </div>
<div class="mat-elevation-z8"> <div class="mat-elevation-z8 table-container">
<table mat-table [dataSource]="dataSource" matSort> <table mat-table [dataSource]="dataSource" matSort>
@@ -13,3 +13,4 @@ table {
.text-center { .text-center {
text-align: center; text-align: center;
} }
@@ -16,7 +16,7 @@
</mat-form-field> </mat-form-field>
</div> </div>
<div class="mat-elevation-z8"> <div class="mat-elevation-z8 table-container">
<table mat-table [dataSource]="dataSource" matSort> <table mat-table [dataSource]="dataSource" matSort>
+19 -17
View File
@@ -13,29 +13,31 @@
<mat-tab label="Expenses"></mat-tab> <mat-tab label="Expenses"></mat-tab>
</mat-tab-group> </mat-tab-group>
<table mat-table [dataSource]="dataSource"> <div class="table-container">
<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="info"> <ng-container matColumnDef="info">
<td mat-cell *matCellDef="let mixtaxonomy"> <td mat-cell *matCellDef="let mixtaxonomy">
<fa-icon icon="question-circle" [matTooltip]="mixtaxonomy.description"></fa-icon> <fa-icon icon="question-circle" [matTooltip]="mixtaxonomy.description"></fa-icon>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="name"> <ng-container matColumnDef="name">
<td mat-cell *matCellDef="let mixtaxonomy"> {{ mixtaxonomy.name }} </td> <td mat-cell *matCellDef="let mixtaxonomy"> {{ mixtaxonomy.name }} </td>
</ng-container> </ng-container>
<ng-container matColumnDef="dimension"> <ng-container matColumnDef="dimension">
<td mat-cell *matCellDef="let mixtaxonomy"> {{ mixtaxonomy.dimension }} </td> <td mat-cell *matCellDef="let mixtaxonomy"> {{ mixtaxonomy.dimension }} </td>
</ng-container> </ng-container>
<ng-container matColumnDef="mapping"> <ng-container matColumnDef="mapping">
<td mat-cell *matCellDef="let mixtaxonomy"> <input [formControl]="mixtaxonomy.mapping" [matAutocomplete]="glAccountAutocomplete"></td> <td mat-cell *matCellDef="let mixtaxonomy"> <input [formControl]="mixtaxonomy.mapping" [matAutocomplete]="glAccountAutocomplete"></td>
</ng-container> </ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row"></tr>
</table> </table>
</div>
<div class="container m-t-20" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="20px"> <div class="container m-t-20" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="20px">
<button mat-raised-button color="primary" [routerLink]="['./report']"> <button mat-raised-button color="primary" [routerLink]="['./report']">
@@ -97,7 +97,7 @@
</mat-option> </mat-option>
</mat-autocomplete> </mat-autocomplete>
<div class="container mat-elevation-z8"> <div class="container mat-elevation-z8 table-container">
<table mat-table [dataSource]="dataSource" matSort> <table mat-table [dataSource]="dataSource" matSort>
@@ -14,7 +14,7 @@
</div> </div>
</div> </div>
<div #eventsTable class="mat-elevation-z8"> <div #eventsTable class="mat-elevation-z8 table-container">
<table mat-table [dataSource]="dataSource" matSort> <table mat-table [dataSource]="dataSource" matSort>
@@ -16,7 +16,7 @@
</mat-form-field> </mat-form-field>
</div> </div>
<div #reportsTable class="mat-elevation-z8"> <div #reportsTable class="mat-elevation-z8 table-container">
<table mat-table [dataSource]="dataSource" matSort> <table mat-table [dataSource]="dataSource" matSort>
+6
View File
@@ -19,3 +19,9 @@ body {
.overflow-scroll { .overflow-scroll {
overflow: scroll; overflow: scroll;
} }
.table-container {
overflow-x: auto;
max-width: 100%;
}