fix: fix table size

phodal · Mar 11, 2020 · cafc8a3 · cafc8a3
1 parent c3f08fe
commit cafc8a3
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/src/app/shared/components/process-table/process-table.component.html b/src/app/shared/components/process-table/process-table.component.html
@@ -1,11 +1,15 @@
 <div class="table-container" role="table" aria-label="Destinations">
   <div class="flex-table header" role="rowgroup">
-    <div class="flex-row" *ngFor="let header of processTable.headers;let first = first" [ngClass]="first ? 'first' : ''">
+    <div class="flex-row"
+         [ngStyle]="getHeaderColumn()"
+         *ngFor="let header of processTable.headers;let first = first" [ngClass]="first ? 'first' : ''">
       {{header}}
     </div>
   </div>
   <div class="flex-table row" role="rowgroup" *ngFor="let column of processTable.cells">
-    <div class="flex-row" *ngFor="let cell of column;let first = first"  [ngClass]="first ? 'first' : ''">
+    <div class="flex-row"
+         [ngStyle]="getColumnStyle()"
+         *ngFor="let cell of column;let first = first"  [ngClass]="first ? 'first' : ''">
       {{cell}}
     </div>
   </div>

diff --git a/src/app/shared/components/process-table/process-table.component.scss b/src/app/shared/components/process-table/process-table.component.scss
@@ -39,7 +39,6 @@ div {
 }
 
 .flex-row {
-  width: calc(100% / 6);
   text-align: center;
   padding: 0.5em 0.5em;
 }
@@ -55,7 +54,6 @@ div {
   position: relative;
 
   .flex-row {
-    width: calc(100% / 6 - 10px);
     position: relative;
     height: 44px;
     line-height: 44px;

diff --git a/src/app/shared/components/process-table/process-table.component.ts b/src/app/shared/components/process-table/process-table.component.ts
@@ -19,6 +19,7 @@ export class ProcessTableComponent implements OnInit {
     headers: [],
     cells: []
   };
+  headerSize = 0;
 
   constructor() {
   }
@@ -46,7 +47,21 @@ export class ProcessTableComponent implements OnInit {
       if (token.type === 'table') {
         this.processTable.headers = token.header;
         this.processTable.cells = token.cells;
+
+        this.headerSize = this.processTable.headers.length;
       }
     }
   }
+
+  getHeaderColumn() {
+    return {
+      width: `calc(100% / ${this.headerSize} - 10px)`
+    };
+  }
+
+  getColumnStyle() {
+    return {
+      width: `calc(100% / ${this.headerSize})`
+    };
+  }
 }