diff --git a/src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts b/src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts index 5ec91669aba1..89b2dab4d1ba 100644 --- a/src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts +++ b/src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts @@ -2019,6 +2019,65 @@ describe('FlexibleConnectedPositionStrategy', () => { document.body.removeChild(veryLargeElement); }); + it('should set the maxWidth and maxHeight on the bounding box when exact dimension are ' + + 'not used', () => { + originElement.style.top = '50px'; + originElement.style.left = '50%'; + originElement.style.position = 'fixed'; + + positionStrategy + .withFlexibleDimensions() + .withPositions([{ + overlayX: 'start', + overlayY: 'top', + originX: 'start', + originY: 'bottom' + }]); + + attachOverlay({ + positionStrategy, + maxWidth: 250, + maxHeight: 300 + }); + + const overlayStyle = overlayRef.overlayElement.style; + const boundingBoxStyle = overlayRef.hostElement.style; + + expect(overlayStyle.maxWidth).toBeFalsy(); + expect(overlayStyle.maxHeight).toBeFalsy(); + expect(boundingBoxStyle.maxWidth).toBe('250px'); + expect(boundingBoxStyle.maxHeight).toBe('300px'); + }); + + it('should set the maxWidth and maxHeight on the overlay pane when exact dimensions are used', + () => { + originElement.style.bottom = '0'; + originElement.style.left = '50%'; + originElement.style.position = 'fixed'; + + positionStrategy + .withFlexibleDimensions() + .withPositions([{ + overlayX: 'start', + overlayY: 'top', + originX: 'start', + originY: 'bottom' + }]); + + attachOverlay({ + positionStrategy, + maxWidth: 250, + maxHeight: 300 + }); + + const overlayStyle = overlayRef.overlayElement.style; + const boundingBoxStyle = overlayRef.hostElement.style; + + expect(overlayStyle.maxWidth).toBe('250px'); + expect(overlayStyle.maxHeight).toBe('300px'); + expect(boundingBoxStyle.maxWidth).toBeFalsy(); + expect(boundingBoxStyle.maxHeight).toBeFalsy(); + }); }); diff --git a/src/cdk/overlay/position/flexible-connected-position-strategy.ts b/src/cdk/overlay/position/flexible-connected-position-strategy.ts index 36111025d42d..8f748de9a613 100644 --- a/src/cdk/overlay/position/flexible-connected-position-strategy.ts +++ b/src/cdk/overlay/position/flexible-connected-position-strategy.ts @@ -791,7 +791,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy { if (this._hasExactPosition()) { styles.top = styles.left = '0'; - styles.bottom = styles.right = ''; + styles.bottom = styles.right = styles.maxHeight = styles.maxWidth = ''; styles.width = styles.height = '100%'; } else { const maxHeight = this._overlayRef.getConfig().maxHeight; @@ -860,8 +860,11 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy { /** Sets positioning styles to the overlay element. */ private _setOverlayElementStyles(originPoint: Point, position: ConnectedPosition): void { const styles = {} as CSSStyleDeclaration; + const hasExactPosition = this._hasExactPosition(); + const hasFlexibleDimensions = this._hasFlexibleDimensions; + const config = this._overlayRef.getConfig(); - if (this._hasExactPosition()) { + if (hasExactPosition) { const scrollPosition = this._viewportRuler.getViewportScrollPosition(); extendStyles(styles, this._getExactOverlayY(position, originPoint, scrollPosition)); extendStyles(styles, this._getExactOverlayX(position, originPoint, scrollPosition)); @@ -891,12 +894,22 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy { // If a maxWidth or maxHeight is specified on the overlay, we remove them. We do this because // we need these values to both be set to "100%" for the automatic flexible sizing to work. // The maxHeight and maxWidth are set on the boundingBox in order to enforce the constraint. - if (this._hasFlexibleDimensions && this._overlayRef.getConfig().maxHeight) { - styles.maxHeight = ''; + // Note that this doesn't apply when we have an exact position, in which case we do want to + // apply them because they'll be cleared from the bounding box. + if (config.maxHeight) { + if (hasExactPosition) { + styles.maxHeight = coerceCssPixelValue(config.maxHeight); + } else if (hasFlexibleDimensions) { + styles.maxHeight = ''; + } } - if (this._hasFlexibleDimensions && this._overlayRef.getConfig().maxWidth) { - styles.maxWidth = ''; + if (config.maxWidth) { + if (hasExactPosition) { + styles.maxWidth = coerceCssPixelValue(config.maxWidth); + } else if (hasFlexibleDimensions) { + styles.maxWidth = ''; + } } extendStyles(this._pane.style, styles);