Fix: Overflow in Navbar by Making Table Scrollable (To avoid overflow)
Optimize the code by implementing the style globally
This commit is contained in:
@@ -14,7 +14,7 @@
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="mat-elevation-z8">
|
||||
<div class="mat-elevation-z8 table-container">
|
||||
|
||||
<table mat-table [dataSource]="dataSource" matSort>
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div #chargesTable class="mat-elevation-z8">
|
||||
<div #chargesTable class="mat-elevation-z8 table-container">
|
||||
|
||||
<table mat-table [dataSource]="dataSource" matSort>
|
||||
|
||||
|
||||
@@ -1,7 +1,3 @@
|
||||
.container{
|
||||
width: 74rem;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
|
||||
@@ -9,3 +5,4 @@ table {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="mat-elevation-z8">
|
||||
<div class="mat-elevation-z8 table-container">
|
||||
|
||||
<table mat-table [dataSource]="dataSource" matSort>
|
||||
|
||||
|
||||
@@ -13,3 +13,4 @@ table {
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="mat-elevation-z8">
|
||||
<div class="mat-elevation-z8 table-container">
|
||||
|
||||
<table mat-table [dataSource]="dataSource" matSort>
|
||||
|
||||
|
||||
@@ -13,29 +13,31 @@
|
||||
<mat-tab label="Expenses"></mat-tab>
|
||||
</mat-tab-group>
|
||||
|
||||
<table mat-table [dataSource]="dataSource">
|
||||
<div class="table-container">
|
||||
<table mat-table [dataSource]="dataSource">
|
||||
|
||||
<ng-container matColumnDef="info">
|
||||
<td mat-cell *matCellDef="let mixtaxonomy">
|
||||
<fa-icon icon="question-circle" [matTooltip]="mixtaxonomy.description"></fa-icon>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="info">
|
||||
<td mat-cell *matCellDef="let mixtaxonomy">
|
||||
<fa-icon icon="question-circle" [matTooltip]="mixtaxonomy.description"></fa-icon>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="name">
|
||||
<td mat-cell *matCellDef="let mixtaxonomy"> {{ mixtaxonomy.name }} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="name">
|
||||
<td mat-cell *matCellDef="let mixtaxonomy"> {{ mixtaxonomy.name }} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="dimension">
|
||||
<td mat-cell *matCellDef="let mixtaxonomy"> {{ mixtaxonomy.dimension }} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="dimension">
|
||||
<td mat-cell *matCellDef="let mixtaxonomy"> {{ mixtaxonomy.dimension }} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="mapping">
|
||||
<td mat-cell *matCellDef="let mixtaxonomy"> <input [formControl]="mixtaxonomy.mapping" [matAutocomplete]="glAccountAutocomplete"></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="mapping">
|
||||
<td mat-cell *matCellDef="let mixtaxonomy"> <input [formControl]="mixtaxonomy.mapping" [matAutocomplete]="glAccountAutocomplete"></td>
|
||||
</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">
|
||||
<button mat-raised-button color="primary" [routerLink]="['./report']">
|
||||
|
||||
@@ -97,7 +97,7 @@
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
|
||||
<div class="container mat-elevation-z8">
|
||||
<div class="container mat-elevation-z8 table-container">
|
||||
|
||||
<table mat-table [dataSource]="dataSource" matSort>
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div #eventsTable class="mat-elevation-z8">
|
||||
<div #eventsTable class="mat-elevation-z8 table-container">
|
||||
|
||||
<table mat-table [dataSource]="dataSource" matSort>
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div #reportsTable class="mat-elevation-z8">
|
||||
<div #reportsTable class="mat-elevation-z8 table-container">
|
||||
|
||||
<table mat-table [dataSource]="dataSource" matSort>
|
||||
|
||||
|
||||
@@ -19,3 +19,9 @@ body {
|
||||
.overflow-scroll {
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user