Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug(expansion-panel): description not aligned when mixing rows with and without toggle #20002

Open
macjohnny opened this issue Jul 16, 2020 · 1 comment · May be fixed by #20019
Open

bug(expansion-panel): description not aligned when mixing rows with and without toggle #20002

macjohnny opened this issue Jul 16, 2020 · 1 comment · May be fixed by #20019

Comments

@macjohnny
Copy link
Contributor

@macjohnny macjohnny commented Jul 16, 2020

Reproduction

Open example "Basic expansion panel":
https://material.angular.io/components/expansion/examples

Expected Behavior

The descriptions should be horizontally aligned.

Actual Behavior

The descriptions are not aligned

expansion-panel

Environment

  • Angular: 10
  • CDK/Material: 10.0.2
  • Browser(s): Chrome
  • Operating System: Windows
@macjohnny macjohnny changed the title bug(expansion-panel): description not aligned when mixing rows with and without icons bug(expansion-panel): description not aligned when mixing rows with and without toggle Jul 16, 2020
swseverance added a commit to swseverance/material2 that referenced this issue Jul 17, 2020
* Add margin to `.mat-content` element to account for consumer using
  `mat-expansion-panel` components with the toggle hidden alongside
  `mat-expansion-panel` components where the toggle is visible
* Adjust sizing of `.mat-expansion-panel-header-title` and
  `.mat-expansion-panel-header-description` elements so that the width
  of each respective element is uniform across multiple adjacent
  `mat-expansion-panel` elements
* Fixes angular#20002
swseverance added a commit to swseverance/material2 that referenced this issue Jul 17, 2020
* Add margin to `.mat-content` element to account for consumer using
  `mat-expansion-panel` components with the toggle hidden alongside
  `mat-expansion-panel` components where the toggle is visible
* Adjust sizing of `.mat-expansion-panel-header-title` and
  `.mat-expansion-panel-header-description` elements so that the width
  of each respective element is uniform across multiple adjacent
  `mat-expansion-panel` elements
* Fixes angular#20002
@crisbeto crisbeto added the has pr label Jul 17, 2020
@swseverance
Copy link
Contributor

@swseverance swseverance commented Jul 23, 2020

@macjohnny I don't think a PR to fix this is going to be merged any time soon. In the meantime, if you want to fix this with css I would recommend the following:

.mat-content:only-child {
  margin-right: 8px;
}

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

StackBlitz

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

4 participants
You can’t perform that action at this time.