diff --git a/src/cdk-experimental/column-resize/resizable.ts b/src/cdk-experimental/column-resize/resizable.ts index 4a02585e1abe..c0fa419b8384 100644 --- a/src/cdk-experimental/column-resize/resizable.ts +++ b/src/cdk-experimental/column-resize/resizable.ts @@ -46,6 +46,7 @@ import {ResizeStrategy} from './resize-strategy'; import {_CoalescedStyleScheduler} from './coalesced-style-scheduler'; const OVERLAY_ACTIVE_CLASS = 'cdk-resizable-overlay-thumb-active'; +const RESIZE_DISABLED_CLASS = 'cdk-resizable-resize-disabled'; /** * Base class for Resizable directives which are applied to column headers to make those columns @@ -188,11 +189,18 @@ export abstract class Resizable .pipe(takeUntilDestroyed) .subscribe(hoveringRow => { if (hoveringRow) { - if (!this.overlayRef) { - this.overlayRef = this._createOverlayForHandle(); - } + const tooBigToResize = + this.maxWidthPxInternal < Number.MAX_SAFE_INTEGER && + element.offsetWidth > this.maxWidthPxInternal; + element.classList.toggle(RESIZE_DISABLED_CLASS, tooBigToResize); + + if (!tooBigToResize) { + if (!this.overlayRef) { + this.overlayRef = this._createOverlayForHandle(); + } - this._showHandleOverlay(); + this._showHandleOverlay(); + } } else if (this.overlayRef) { // todo - can't detach during an active resize - need to work that out this.overlayRef.detach(); diff --git a/src/material-experimental/column-resize/_column-resize-theme.scss b/src/material-experimental/column-resize/_column-resize-theme.scss index a9715bb33772..faeb574345d4 100644 --- a/src/material-experimental/column-resize/_column-resize-theme.scss +++ b/src/material-experimental/column-resize/_column-resize-theme.scss @@ -71,6 +71,10 @@ .mat-resizable-handle { background: $resizable-hover-divider; } + + .cdk-resizable-resize-disabled > .mat-resizable-handle { + background: $non-resizable-hover-divider; + } } [dir='rtl'] {