Components: (feature) expansion panel: secondary content & description alignment

Created on 16 Jun 2017 · 9Comments · Source: angular/components

Bug, feature request, or proposal:

Feature.

What is the expected behavior?

Secondary content is supported by expansion panel header.
The descriptions should line up.
GUIDELINES

What is the current behavior?

Expansion panel has a fixed height and line height. Secondary content is not supported.
The descriptions don't line up.

What are the steps to reproduce?

ROUGH EXAMPLE

What is the use-case or motivation for changing an existing behavior?

Support secondary content.
Align descriptions in a column.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

@angular/material 2.0.0-beta.6-*

feature needs discussion

Source

mattheiler

👍10

Most helpful comment

@dmitrysteblyuk, if you're using a <md-accordion> try this:

<md-accordion class="my-headers-align">

in the component css class:

.my-headers-align .mat-expansion-panel-header-title, 
.my-headers-align .mat-expansion-panel-header-description {
  flex-basis: 0;
}

Or, to set it globally, just ommit the .my-headers-align part in styles.css:

.mat-expansion-panel-header-title, 
.mat-expansion-panel-header-description {
  flex-basis: 0;
}

julianobrasil on 25 Aug 2017

❤4 👍4

All 9 comments

Maybe adding flex-basis: 0 to mat-expansion-panel-header-title and mat-expansion-panel-header-description could fix the alignment (or replacing flex-grow: X by just flex: X)

julianobrasil on 17 Jun 2017

Using flex layout and assigning fxFlex="50%" to the title fixes the alignment issue. However, still cant display secondary content, as of beta 8.

mattheiler on 11 Aug 2017

Does anybody managed to come up with a workaround?
I guess the problem here is with expansionHeight trigger for MdExpansionPanelHeader, which sets fixed line-height and height styles. I tried to override them using css !important flag and was quite surprised to find out it doesn't work during animation.

dmitrysteblyuk on 25 Aug 2017

@dmitrysteblyuk, if you're using a <md-accordion> try this:

<md-accordion class="my-headers-align">

in the component css class:

.my-headers-align .mat-expansion-panel-header-title, 
.my-headers-align .mat-expansion-panel-header-description {
  flex-basis: 0;
}

Or, to set it globally, just ommit the .my-headers-align part in styles.css:

.mat-expansion-panel-header-title, 
.mat-expansion-panel-header-description {
  flex-basis: 0;
}

julianobrasil on 25 Aug 2017

❤4 👍4

If one element has hideToggle and the other one doesn't it won't be aligned. One of .mat-content will be smaller than the other because of the indicator.

Hackish solution for that (add toggle-fix to mat-expansion-panel with hideToggle)

.toggle-fix .mat-content {
  padding-right: 8px;
}

BojanKogoj on 16 Jan 2020

Closing this since I believe it's something the application can do with CSS.

jelbourn on 28 Apr 2020

Well, maybe the application can do this with CSS, but the current version of the spec does codify some of the spacing involved, so I would make the argument that full support from the component for multi-part headers would make spec compliance more likely.

The weird part is that it specifies the space between "parts" of the header, but doesn't specify how the parts are defined. Clearly the block width of the first and third examples (with two and three blocks per header, respectively) is not the native / inline width of the text itself, but it's also not divided evenly into halves or thirds. I guess if the application has to decide on some fixed rule for how the headers get divided, and the spec has nothing to say about it, maybe there's nothing the component can do?