diff --git a/src/components-examples/material/expansion/expansion-expand-collapse-all/expansion-expand-collapse-all-example.css b/src/components-examples/material/expansion/expansion-expand-collapse-all/expansion-expand-collapse-all-example.css index 7628b04917c6..a6973afc61b1 100644 --- a/src/components-examples/material/expansion/expansion-expand-collapse-all/expansion-expand-collapse-all-example.css +++ b/src/components-examples/material/expansion/expansion-expand-collapse-all/expansion-expand-collapse-all-example.css @@ -2,11 +2,6 @@ padding-bottom: 20px; } -.example-headers-align .mat-expansion-panel-header-title, -.example-headers-align .mat-expansion-panel-header-description { - flex-basis: 0; -} - .example-headers-align .mat-expansion-panel-header-description { justify-content: space-between; align-items: center; diff --git a/src/components-examples/material/expansion/expansion-steps/expansion-steps-example.css b/src/components-examples/material/expansion/expansion-steps/expansion-steps-example.css index d398488e5e3d..9ee24f9406a9 100644 --- a/src/components-examples/material/expansion/expansion-steps/expansion-steps-example.css +++ b/src/components-examples/material/expansion/expansion-steps/expansion-steps-example.css @@ -1,8 +1,3 @@ -.example-headers-align .mat-expansion-panel-header-title, -.example-headers-align .mat-expansion-panel-header-description { - flex-basis: 0; -} - .example-headers-align .mat-expansion-panel-header-description { justify-content: space-between; align-items: center; diff --git a/src/material/expansion/expansion-panel-header.html b/src/material/expansion/expansion-panel-header.html index 41c329965859..d3f4b7c6b385 100644 --- a/src/material/expansion/expansion-panel-header.html +++ b/src/material/expansion/expansion-panel-header.html @@ -1,4 +1,4 @@ - + diff --git a/src/material/expansion/expansion-panel-header.scss b/src/material/expansion/expansion-panel-header.scss index 0cff73550702..93d01d228632 100644 --- a/src/material/expansion/expansion-panel-header.scss +++ b/src/material/expansion/expansion-panel-header.scss @@ -45,12 +45,33 @@ flex: 1; flex-direction: row; overflow: hidden; + + // width of .mat-expansion-indicator::after element + &.mat-content-hide-toggle { + margin-right: 8px; + + [dir='rtl'] & { + margin-right: 0; + margin-left: 8px; + } + + .mat-expansion-toggle-indicator-before & { + margin-left: 24px; + margin-right: 0; + + [dir='rtl'] & { + margin-right: 24px; + margin-left: 0; + } + } + } } .mat-expansion-panel-header-title, .mat-expansion-panel-header-description { display: flex; flex-grow: 1; + flex-basis: 0; margin-right: 16px; [dir='rtl'] & { diff --git a/src/material/expansion/expansion.spec.ts b/src/material/expansion/expansion.spec.ts index 4b5ad277e27b..4372b44953d7 100644 --- a/src/material/expansion/expansion.spec.ts +++ b/src/material/expansion/expansion.spec.ts @@ -245,17 +245,20 @@ describe('MatExpansionPanel', () => { it('should be able to hide the toggle', () => { const fixture = TestBed.createComponent(PanelWithContent); const header = fixture.debugElement.query(By.css('.mat-expansion-panel-header'))!.nativeElement; + const content = fixture.debugElement.query(By.css('.mat-content'))!.nativeElement; fixture.detectChanges(); expect(header.querySelector('.mat-expansion-indicator')) .toBeTruthy('Expected indicator to be shown.'); + expect(content.classList).not.toContain('mat-content-hide-toggle'); fixture.componentInstance.hideToggle = true; fixture.detectChanges(); expect(header.querySelector('.mat-expansion-indicator')) .toBeFalsy('Expected indicator to be hidden.'); + expect(content.classList).toContain('mat-content-hide-toggle'); }); it('should update the indicator rotation when the expanded state is toggled programmatically',