diff --git a/src/lib/core/overlay/overlay-ref.ts b/src/lib/core/overlay/overlay-ref.ts index aa1cb3df8b01..a1a272cb2fdb 100644 --- a/src/lib/core/overlay/overlay-ref.ts +++ b/src/lib/core/overlay/overlay-ref.ts @@ -60,7 +60,12 @@ export class OverlayRef implements PortalHost { } if (this._state.panelClass) { - this._pane.classList.add(this._state.panelClass); + // We can't do a spread here, because IE doesn't support setting multiple classes. + if (Array.isArray(this._state.panelClass)) { + this._state.panelClass.forEach(cls => this._pane.classList.add(cls)); + } else { + this._pane.classList.add(this._state.panelClass); + } } // Only emit the `attachments` event once all other setup is done. diff --git a/src/lib/core/overlay/overlay-state.ts b/src/lib/core/overlay/overlay-state.ts index a9b9a00563e9..16003dff607d 100644 --- a/src/lib/core/overlay/overlay-state.ts +++ b/src/lib/core/overlay/overlay-state.ts @@ -24,7 +24,7 @@ export class OverlayState { scrollStrategy: ScrollStrategy = new NoopScrollStrategy(); /** Custom class to add to the overlay pane. */ - panelClass?: string = ''; + panelClass?: string | string[] = ''; /** Whether the overlay has a backdrop. */ hasBackdrop?: boolean = false; diff --git a/src/lib/core/overlay/overlay.spec.ts b/src/lib/core/overlay/overlay.spec.ts index fc31e3f9d28a..a937724ea0c4 100644 --- a/src/lib/core/overlay/overlay.spec.ts +++ b/src/lib/core/overlay/overlay.spec.ts @@ -395,18 +395,29 @@ describe('Overlay', () => { }); describe('panelClass', () => { - let config: OverlayState; - config = new OverlayState(); - config.panelClass = 'custom-panel-class'; - it('should apply a custom overlay pane class', () => { - let overlayRef = overlay.create(config); - overlayRef.attach(componentPortal); + const config = new OverlayState(); + + config.panelClass = 'custom-panel-class'; + overlay.create(config).attach(componentPortal); viewContainerFixture.detectChanges(); - let pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement; + const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement; expect(pane.classList).toContain('custom-panel-class'); }); + + it('should be able to apply multiple classes', () => { + const config = new OverlayState(); + + config.panelClass = ['custom-class-one', 'custom-class-two']; + overlay.create(config).attach(componentPortal); + viewContainerFixture.detectChanges(); + + const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement; + + expect(pane.classList).toContain('custom-class-one'); + expect(pane.classList).toContain('custom-class-two'); + }); }); describe('scroll strategy', () => { diff --git a/src/lib/dialog/dialog-config.ts b/src/lib/dialog/dialog-config.ts index dfe5ce0525f4..6b5eeb26c84b 100644 --- a/src/lib/dialog/dialog-config.ts +++ b/src/lib/dialog/dialog-config.ts @@ -40,7 +40,7 @@ export class MdDialogConfig { role?: DialogRole = 'dialog'; /** Custom class for the overlay pane. */ - panelClass?: string = ''; + panelClass?: string | string[] = ''; /** Whether the dialog has a backdrop. */ hasBackdrop?: boolean = true;