diff --git a/src/lib/expansion/expansion-panel.ts b/src/lib/expansion/expansion-panel.ts
index 8bdc8c1758b..4b2b8371718 100644
--- a/src/lib/expansion/expansion-panel.ts
+++ b/src/lib/expansion/expansion-panel.ts
@@ -65,9 +65,8 @@ export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,
transition('expanded <=> collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING)),
]),
trigger('displayMode', [
- state('collapsed', style({margin: '0'})),
+ state('flat, collapsed', style({margin: '0'})),
state('default', style({margin: '16px 0'})),
- state('flat', style({margin: '0'})),
transition('flat <=> collapsed, default <=> collapsed, flat <=> default',
animate(EXPANSION_PANEL_ANIMATION_TIMING)),
]),
@@ -93,14 +92,12 @@ export class MdExpansionPanel extends AccordionItem {
}
/** Gets the panel's display mode. */
- _getDisplayMode(): MdAccordionDisplayMode | MdExpansionPanelState {
- if (!this.expanded) {
- return this._getExpandedState();
- }
+ _getDisplayMode(): MdAccordionDisplayMode | MdExpansionPanelState | 'void' {
if (this.accordion) {
- return this.accordion.displayMode;
+ return this.expanded ? this.accordion.displayMode : this._getExpandedState();
}
- return this._getExpandedState();
+
+ return 'void';
}
/** Gets the expanded state string. */
diff --git a/src/lib/expansion/expansion.spec.ts b/src/lib/expansion/expansion.spec.ts
index 160fc96fca7..89e4470958a 100644
--- a/src/lib/expansion/expansion.spec.ts
+++ b/src/lib/expansion/expansion.spec.ts
@@ -13,7 +13,8 @@ describe('MdExpansionPanel', () => {
MdExpansionModule
],
declarations: [
- PanelWithContent
+ PanelWithContent,
+ PanelWithCustomMargin
],
});
TestBed.compileComponents();
@@ -76,19 +77,64 @@ describe('MdExpansionPanel', () => {
button.focus();
expect(document.activeElement).not.toBe(button, 'Expected button to no longer be focusable.');
}));
+
+ it('should not override the panel margin if it is not inside an accordion', fakeAsync(() => {
+ let fixture = TestBed.createComponent(PanelWithCustomMargin);
+ fixture.detectChanges();
+
+ let panel = fixture.debugElement.query(By.css('md-expansion-panel'));
+ let styles = getComputedStyle(panel.nativeElement);
+
+ expect(panel.componentInstance._getDisplayMode()).toBe('void');
+ expect(styles.marginTop).toBe('13px');
+ expect(styles.marginBottom).toBe('13px');
+ expect(styles.marginLeft).toBe('37px');
+ expect(styles.marginRight).toBe('37px');
+
+ fixture.componentInstance.expanded = true;
+ fixture.detectChanges();
+ tick(250);
+
+ styles = getComputedStyle(panel.nativeElement);
+
+ expect(panel.componentInstance._getDisplayMode()).toBe('void');
+ expect(styles.marginTop).toBe('13px');
+ expect(styles.marginBottom).toBe('13px');
+ expect(styles.marginLeft).toBe('37px');
+ expect(styles.marginRight).toBe('37px');
+ }));
});
-@Component({template: `
+@Component({
+ template: `
Panel Title
Some content
- `})
+ `
+})
class PanelWithContent {
expanded: boolean = false;
openCallback = jasmine.createSpy('openCallback');
closeCallback = jasmine.createSpy('closeCallback');
}
+
+
+@Component({
+ styles: [
+ `md-expansion-panel {
+ margin: 13px 37px;
+ }`
+ ],
+ template: `
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores officia, aliquam dicta
+ corrupti maxime voluptate accusamus impedit atque incidunt pariatur.
+ `
+})
+class PanelWithCustomMargin {
+ expanded: boolean = false;
+}