diff --git a/src/cdk/overlay/overlay-ref.ts b/src/cdk/overlay/overlay-ref.ts index 7aec70b29b3d..765187848ec4 100644 --- a/src/cdk/overlay/overlay-ref.ts +++ b/src/cdk/overlay/overlay-ref.ts @@ -176,6 +176,14 @@ export class OverlayRef implements PortalHost { if (this._state.minHeight || this._state.minHeight === 0) { this._pane.style.minHeight = formatCssUnit(this._state.minHeight); } + + if (this._state.maxWidth || this._state.maxWidth === 0) { + this._pane.style.maxWidth = formatCssUnit(this._state.maxWidth); + } + + if (this._state.maxHeight || this._state.maxHeight === 0) { + this._pane.style.maxHeight = formatCssUnit(this._state.maxHeight); + } } /** Toggles the pointer events for the overlay pane element. */ diff --git a/src/cdk/overlay/overlay-state.ts b/src/cdk/overlay/overlay-state.ts index c65f16add06f..faba40d05881 100644 --- a/src/cdk/overlay/overlay-state.ts +++ b/src/cdk/overlay/overlay-state.ts @@ -44,6 +44,12 @@ export class OverlayState { /** The min-height of the overlay panel. If a number is provided, pixel units are assumed. */ minHeight?: number | string; + /** The max-width of the overlay panel. If a number is provided, pixel units are assumed. */ + maxWidth?: number | string; + + /** The max-height of the overlay panel. If a number is provided, pixel units are assumed. */ + maxHeight?: number | string; + /** The direction of the text in the overlay panel. */ direction?: Direction = 'ltr'; diff --git a/src/cdk/overlay/overlay.spec.ts b/src/cdk/overlay/overlay.spec.ts index 690d6a20c0a6..f5551047e967 100644 --- a/src/cdk/overlay/overlay.spec.ts +++ b/src/cdk/overlay/overlay.spec.ts @@ -295,6 +295,22 @@ describe('Overlay', () => { expect(pane.style.minHeight).toEqual('500px'); }); + it('should apply the max width set in the config', () => { + state.maxWidth = 200; + + overlay.create(state).attach(componentPortal); + const pane = overlayContainerElement.children[0] as HTMLElement; + expect(pane.style.maxWidth).toEqual('200px'); + }); + + + it('should apply the max height set in the config', () => { + state.maxHeight = 500; + + overlay.create(state).attach(componentPortal); + const pane = overlayContainerElement.children[0] as HTMLElement; + expect(pane.style.maxHeight).toEqual('500px'); + }); it('should support zero widths and heights', () => { state.width = 0; @@ -305,7 +321,6 @@ describe('Overlay', () => { expect(pane.style.width).toEqual('0px'); expect(pane.style.height).toEqual('0px'); }); - }); describe('backdrop', () => {