diff --git a/src/cdk/overlay/_overlay.scss b/src/cdk/overlay/_overlay.scss index 5602f518ea32..766bd603efae 100644 --- a/src/cdk/overlay/_overlay.scss +++ b/src/cdk/overlay/_overlay.scss @@ -39,9 +39,6 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default; display: flex; position: absolute; z-index: $cdk-z-index-overlay; - - // Fixes issues where overlays are centered on IE when they hit the max-width. - flex-direction: column; } // A single overlay pane. diff --git a/src/cdk/overlay/position/global-position-strategy.spec.ts b/src/cdk/overlay/position/global-position-strategy.spec.ts index f9c214607676..16f3186e2e46 100644 --- a/src/cdk/overlay/position/global-position-strategy.spec.ts +++ b/src/cdk/overlay/position/global-position-strategy.spec.ts @@ -42,8 +42,8 @@ describe('GlobalPositonStrategy', () => { expect(elementStyle.marginBottom).toBe(''); expect(elementStyle.marginRight).toBe(''); - expect(parentStyle.alignItems).toBe('flex-start'); expect(parentStyle.justifyContent).toBe('flex-start'); + expect(parentStyle.alignItems).toBe('flex-start'); }); it('should position the element to the (bottom, right) with an offset', () => { @@ -57,8 +57,8 @@ describe('GlobalPositonStrategy', () => { expect(elementStyle.marginBottom).toBe('70px'); expect(elementStyle.marginRight).toBe('15em'); - expect(parentStyle.alignItems).toBe('flex-end'); expect(parentStyle.justifyContent).toBe('flex-end'); + expect(parentStyle.alignItems).toBe('flex-end'); }); it('should overwrite previously applied positioning', () => { @@ -73,8 +73,8 @@ describe('GlobalPositonStrategy', () => { expect(elementStyle.marginBottom).toBe(''); expect(elementStyle.marginRight).toBe(''); - expect(parentStyle.alignItems).toBe('flex-start'); expect(parentStyle.justifyContent).toBe('flex-start'); + expect(parentStyle.alignItems).toBe('flex-start'); strategy.bottom('70px').right('15em').apply(); @@ -83,8 +83,8 @@ describe('GlobalPositonStrategy', () => { expect(element.style.marginBottom).toBe('70px'); expect(element.style.marginRight).toBe('15em'); - expect(parentStyle.alignItems).toBe('flex-end'); expect(parentStyle.justifyContent).toBe('flex-end'); + expect(parentStyle.alignItems).toBe('flex-end'); }); it('should center the element', () => { @@ -92,8 +92,8 @@ describe('GlobalPositonStrategy', () => { let parentStyle = (element.parentNode as HTMLElement).style; - expect(parentStyle.alignItems).toBe('center'); expect(parentStyle.justifyContent).toBe('center'); + expect(parentStyle.alignItems).toBe('center'); }); it('should center the element with an offset', () => { @@ -105,8 +105,8 @@ describe('GlobalPositonStrategy', () => { expect(elementStyle.marginLeft).toBe('10px'); expect(elementStyle.marginTop).toBe('15px'); - expect(parentStyle.alignItems).toBe('center'); expect(parentStyle.justifyContent).toBe('center'); + expect(parentStyle.alignItems).toBe('center'); }); it('should make the element position: static', () => { @@ -150,14 +150,14 @@ describe('GlobalPositonStrategy', () => { strategy.centerHorizontally().width('100%').apply(); expect(element.style.marginLeft).toBe('0px'); - expect((element.parentNode as HTMLElement).style.alignItems).toBe('flex-start'); + expect((element.parentNode as HTMLElement).style.justifyContent).toBe('flex-start'); }); it('should reset the vertical position and offset when the height is 100%', () => { strategy.centerVertically().height('100%').apply(); expect(element.style.marginTop).toBe('0px'); - expect((element.parentNode as HTMLElement).style.justifyContent).toBe('flex-start'); + expect((element.parentNode as HTMLElement).style.alignItems).toBe('flex-start'); }); it('should not throw when attempting to apply after the overlay has been disposed', () => { diff --git a/src/cdk/overlay/position/global-position-strategy.ts b/src/cdk/overlay/position/global-position-strategy.ts index 1c8e0d8e12cb..0c62b7e0a0fe 100644 --- a/src/cdk/overlay/position/global-position-strategy.ts +++ b/src/cdk/overlay/position/global-position-strategy.ts @@ -46,7 +46,7 @@ export class GlobalPositionStrategy implements PositionStrategy { top(value: string = ''): this { this._bottomOffset = ''; this._topOffset = value; - this._justifyContent = 'flex-start'; + this._alignItems = 'flex-start'; return this; } @@ -57,7 +57,7 @@ export class GlobalPositionStrategy implements PositionStrategy { left(value: string = ''): this { this._rightOffset = ''; this._leftOffset = value; - this._alignItems = 'flex-start'; + this._justifyContent = 'flex-start'; return this; } @@ -68,7 +68,7 @@ export class GlobalPositionStrategy implements PositionStrategy { bottom(value: string = ''): this { this._topOffset = ''; this._bottomOffset = value; - this._justifyContent = 'flex-end'; + this._alignItems = 'flex-end'; return this; } @@ -79,7 +79,7 @@ export class GlobalPositionStrategy implements PositionStrategy { right(value: string = ''): this { this._leftOffset = ''; this._rightOffset = value; - this._alignItems = 'flex-end'; + this._justifyContent = 'flex-end'; return this; } @@ -123,7 +123,7 @@ export class GlobalPositionStrategy implements PositionStrategy { */ centerHorizontally(offset: string = ''): this { this.left(offset); - this._alignItems = 'center'; + this._justifyContent = 'center'; return this; } @@ -135,7 +135,7 @@ export class GlobalPositionStrategy implements PositionStrategy { */ centerVertically(offset: string = ''): this { this.top(offset); - this._justifyContent = 'center'; + this._alignItems = 'center'; return this; }