(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.

[thw0rted]

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?

[jelbourn]

Yeah, this is a case where the spec's under-specification leads me to believe the examples aren't intended to be normative.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}