fix: port from v3 - missing border with small number of rows

Signed-off-by: Ivan Donchev <idonchev@vmware.com>
vmware-archive · Jul 15, 2020 · c76ec04 · c76ec04
1 parent 3d5c7b5
commit c76ec04
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 4 deletions.
diff --git a/packages/angular/projects/clr-angular/src/data/datagrid/_datagrid.clarity.scss b/packages/angular/projects/clr-angular/src/data/datagrid/_datagrid.clarity.scss
@@ -40,6 +40,8 @@
     overflow: auto;
     flex: 1 1 auto;
     margin-top: $clr_baselineRem_0_5;
+    // Force content stretch on Safari
+    display: flex;
   }
 
   .datagrid-container {
@@ -643,6 +645,7 @@
 
   .datagrid-table-wrapper {
     display: flex;
+    flex: 1 1 auto;
   }
 
   .datagrid-table {

diff --git a/packages/angular/projects/dev/src/app/datagrid/detail/detail.html b/packages/angular/projects/dev/src/app/datagrid/detail/detail.html
@@ -231,3 +231,53 @@ <h3>Overlay Option</h3>
     </clr-dg-pagination>
   </clr-dg-footer>
 </clr-datagrid>
+
+<h3>Fixed Height</h3>
+
+<clr-datagrid id="simple" [(clrDgSelected)]="selection" style="height: 500px;">
+  <clr-dg-column [clrDgField]="'id'">User ID</clr-dg-column>
+  <clr-dg-column [clrDgField]="'name'"><ng-container *clrDgHideableColumn>Name</ng-container></clr-dg-column>
+  <clr-dg-column [clrDgField]="'creation'"
+    ><ng-container *clrDgHideableColumn>Creation date</ng-container></clr-dg-column
+  >
+  <clr-dg-column [clrDgField]="'pokemon.name'"><ng-container *clrDgHideableColumn>Pokemon</ng-container></clr-dg-column>
+  <clr-dg-column [clrDgField]="'color'"><ng-container *clrDgHideableColumn>Favorite color</ng-container></clr-dg-column>
+
+  <clr-dg-row
+    *clrDgItems="let user of users | slice:0:4"
+    [clrDgItem]="user"
+    [clrDgDetailOpenLabel]="'Open row details for ' + user.name"
+    [clrDgDetailCloseLabel]="'Open row details for ' + user.name"
+  >
+    <clr-dg-cell>{{user.id}}</clr-dg-cell>
+    <clr-dg-cell>{{user.name}}</clr-dg-cell>
+    <clr-dg-cell>{{user.creation | date}}</clr-dg-cell>
+    <clr-dg-cell>{{user.pokemon.name}}</clr-dg-cell>
+    <clr-dg-cell>
+      <span class="color-square" [style.backgroundColor]="user.color"></span>
+    </clr-dg-cell>
+  </clr-dg-row>
+
+  <!-- Desugared with pre-selection -->
+  <ng-template [(clrIfDetail)]="preState" let-detail>
+    <clr-dg-detail>
+      <clr-dg-detail-header
+        >{{detail.name}} {{detail.name}} {{detail.name}} {{detail.name}} {{detail.name}} {{detail.name}} {{detail.name}}
+        {{detail.name}} {{detail.name}}</clr-dg-detail-header
+      >
+      <clr-dg-detail-body>
+        <pre>{{detail | json}}</pre>
+        <pre>{{detail | json}}</pre>
+        <pre>{{detail | json}}</pre>
+        <pre>{{detail | json}}</pre>
+      </clr-dg-detail-body>
+    </clr-dg-detail>
+  </ng-template>
+
+  <clr-dg-footer>
+    <clr-dg-pagination #pagination [clrDgPageSize]="10">
+      <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Users per page</clr-dg-page-size>
+      {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} users
+    </clr-dg-pagination>
+  </clr-dg-footer>
+</clr-datagrid>
diff --git a/packages/angular/projects/dev/src/app/datagrid/detail/detail.ts b/packages/angular/projects/dev/src/app/datagrid/detail/detail.ts
@@ -1,9 +1,9 @@
 /*
- * Copyright (c) 2016-2019 VMware, Inc. All Rights Reserved.
+ * Copyright (c) 2016-2020 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
-import { Component } from '@angular/core';
+import { Component, ChangeDetectorRef, AfterViewInit } from '@angular/core';
 
 import { Inventory } from '../inventory/inventory';
 import { User } from '../inventory/user';
@@ -13,16 +13,23 @@ import { User } from '../inventory/user';
   templateUrl: 'detail.html',
   styleUrls: ['../datagrid.demo.scss'],
 })
-export class DatagridDetailDemo {
+export class DatagridDetailDemo implements AfterViewInit {
   users: User[];
   selection: User[] = [];
   singleSelection: User;
   state: any = null;
+  preState: any = null;
   stateEvent: any = null;
 
-  constructor(inventory: Inventory) {
+  constructor(inventory: Inventory, private cdr: ChangeDetectorRef) {
     inventory.size = 103;
     inventory.reset();
     this.users = inventory.all;
   }
+
+  ngAfterViewInit() {
+    // We must set it here, or the extra columns are not removed on initialization
+    this.preState = this.users[0];
+    this.cdr.detectChanges();
+  }
 }