Fixed some issues with flex sizing and min width

Author: kseamon

src/cdk-experimental/column-resize/overlay-handle.ts

@@ -80,6 +80,7 @@ export abstract class ResizeOverlayHandle implements AfterViewInit, OnDestroy {
         const initialOverlayOffset = this._getOverlayOffset();
         let overlayOffset = initialOverlayOffset;
         const initialSize = this._getOriginWidth();
+        let originOffset = this._getOriginOffset();
         let size = initialSize;
         let overshot = 0;
 
@@ -137,12 +138,16 @@ export abstract class ResizeOverlayHandle implements AfterViewInit, OnDestroy {
 
           this.resizeNotifier.triggerResize.next({columnId, size: computedNewSize});
 
-          const actualNewSize = this._getOriginWidth();
-          const actualDeltaX = actualNewSize - size;
-          size = actualNewSize;
+          const originNewSize = this._getOriginWidth();
+          const originNewOffset = this._getOriginOffset();
+          const originOffsetDeltaX = originNewOffset - originOffset;
+          const originSizeDeltaX = originNewSize - size;
+          size = originNewSize;
+          originOffset = originNewOffset;
+          console.log(originOffsetDeltaX, originSizeDeltaX);
 
-          overshot += deltaX + (this._isLtr() ? -actualDeltaX : actualDeltaX);
-          overlayOffset += actualDeltaX;
+          overshot += deltaX + (this._isLtr() ? -originSizeDeltaX : originSizeDeltaX);
+          overlayOffset += originSizeDeltaX + originOffsetDeltaX;
 
           this._updateOverlayOffset(overlayOffset);
         });
@@ -159,6 +164,15 @@ export abstract class ResizeOverlayHandle implements AfterViewInit, OnDestroy {
     return this.resizeRef.origin.nativeElement!.offsetWidth;
   }
 
+  private _getOriginOffset(): number {
+    const originElement = this.resizeRef.origin.nativeElement!;
+    const offsetLeft = originElement.offsetLeft;
+
+    return this._isLtr() ?
+        offsetLeft :
+        originElement.offsetParent!.offsetWidth - (offsetLeft + this._getOriginWidth());
+  }
+
   private _getOverlayOffset(): number {
     const overlayElement = this.resizeRef.overlayRef.overlayElement;
     return this._isLtr() ?

src/cdk-experimental/column-resize/resizable.ts

@@ -83,7 +83,6 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
 
   protected abstract getOverlayHandleComponentType(): Type<HandleComponent>;
 
-
   private _listenForRowHoverEvents(): void {
     const element = this.elementRef.nativeElement!;
     const takeUntilDestroyed = takeUntil<boolean>(this.destroyed);

src/cdk-experimental/column-resize/resize-ref.ts

@@ -14,5 +14,5 @@ export class ResizeRef {
       readonly origin: ElementRef,
       readonly overlayRef: OverlayRef,
       readonly minPx: number,
-      readonly maxPx: number) {}
+      readonly maxPx: number,) {}
 }

src/cdk-experimental/column-resize/resize-strategy.ts

@@ -29,8 +29,7 @@ export abstract class ResizeStrategy {
  */
 @Injectable()
 export class TableLayoutFixedResizeStrategy extends ResizeStrategy {
-  applyColumnSize(_: string, columnHeader: HTMLElement, sizeInPx: number): void {
-    columnHeader.style.boxSizing = 'border-box';
+  applyColumnSize(_: string, columnHeader: HTMLElement, sizeInPx: number): void {    
     columnHeader.style.width = coerceCssPixelValue(sizeInPx);
   }
 }
@@ -78,7 +77,7 @@ export class CdkFlexTableResizeStrategy extends ResizeStrategy implements OnDest
     const cssSize = coerceCssPixelValue(sizeInPx);
 
     (this._styleElement.sheet as CSSStyleSheet).insertRule(
-        `${selector} {box-sizing: border-box;flex:0 0 ${cssSize}}`, index!);
+        `${selector} {flex:0 0.01 ${cssSize}}`, index!);
   }
 
   protected getColumnCssClass(cssFriendlyColumnName: string): string {

src/dev-app/column-resize/default-enabled/default-enabled-column-resize-demo.html

@@ -1,7 +1,7 @@
 <table mat-table [dataSource]="dataSource" class="mat-elevation-z8 example-table">
   <!-- Position Column -->
   <ng-container matColumnDef="position">
-    <th mat-header-cell *matHeaderCellDef> No. </th>
+    <th mat-header-cell *matHeaderCellDef [matResizableMaxPx]="100"> No. </th>
     <td mat-cell *matCellDef="let element"> {{element.position}} </td>
   </ng-container>
 

src/material-experimental/column-resize/_column-resize.scss

@@ -12,14 +12,26 @@
   $resizable-active-divider: mat-color($primary, 500);
 
   // Required for resizing to work properly.
-  table.cdk-column-resize-with-resized-column {
+  .mat-column-resize-table.cdk-column-resize-with-resized-column {
     table-layout: fixed;
   }
+  
+  .mat-column-resize-flex {
+    .mat-header-cell,
+    .mat-cell {
+      box-sizing: border-box;
+      min-width: 32px;
+    }
+  }
 
   .mat-header-cell {
     position: relative;
   }
 
+  .mat-resizable {
+    box-sizing: border-box;
+  }
+
   .mat-header-cell:not(.mat-resizable)::after,
   .mat-resizable-handle {
     background: transparent;

src/material-experimental/column-resize/column-resize.ts

@@ -24,9 +24,16 @@ const PROVIDERS = [ColumnResizeNotifier, HeaderRowEventDispatcher, ColumnResizeN
 const TABLE_PROVIDERS = [...PROVIDERS, TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER];
 const FLEX_PROVIDERS = [...PROVIDERS, FLEX_RESIZE_STRATEGY_PROVIDER];
 const HOST_BINDINGS = {
-  '[class]': 'getIdClass()',
   '[class.mat-column-resize-rtl]': 'directionality.value === "rtl"',
 };
+const TABLE_HOST_BINDINGS = {
+  ...HOST_BINDINGS,
+  '[class]': '"mat-column-resize-table " + getIdClass()',
+}
+const FLEX_HOST_BINDINGS = {
+  ...HOST_BINDINGS,
+  '[class]': '"mat-column-resize-flex " + getIdClass()',
+}
 
 export abstract class AbstractMatColumnResize extends ColumnResize {
   getTableHeight() {
@@ -36,7 +43,7 @@ export abstract class AbstractMatColumnResize extends ColumnResize {
 
 @Directive({
   selector: 'table[mat-table]',
-  host: HOST_BINDINGS,
+  host: TABLE_HOST_BINDINGS,
   providers: [
     ...TABLE_PROVIDERS,
     {provide: ColumnResize, useExisting: MatDefaultEnabledColumnResize},
@@ -55,7 +62,7 @@ export class MatDefaultEnabledColumnResize extends AbstractMatColumnResize {
 
 @Directive({
   selector: 'mat-table',
-  host: HOST_BINDINGS,
+  host: FLEX_HOST_BINDINGS,
   providers: [
     ...FLEX_PROVIDERS,
     {provide: ColumnResize, useExisting: MatDefaultEnabledColumnResizeFlex},
@@ -74,7 +81,7 @@ export class MatDefaultEnabledColumnResizeFlex extends AbstractMatColumnResize {
 
 @Directive({
   selector: 'table[mat-table][columnResize]',
-  host: HOST_BINDINGS,
+  host: TABLE_HOST_BINDINGS,
   providers: [
     ...TABLE_PROVIDERS,
     {provide: ColumnResize, useExisting: MatColumnResize},
@@ -93,7 +100,7 @@ export class MatColumnResize extends AbstractMatColumnResize {
 
 @Directive({
   selector: 'mat-table[columnResize]',
-  host: HOST_BINDINGS,
+  host: FLEX_HOST_BINDINGS,
   providers: [
     ...FLEX_PROVIDERS,
     {provide: ColumnResize, useExisting: MatColumnResizeFlex},