(feature) expansion panel: secondary content & description alignment

[mattheiler]

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-*

[julianobrasil]

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)

[mattheiler]

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

[dmitrysteblyuk]

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.

[julianobrasil]

@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;
}

[BojanKogoj]

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;
}

[jelbourn]

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