Join GitHub today
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.
Sign upbug(expansion-panel): description not aligned when mixing rows with and without toggle #20002
Comments
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
|
@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;
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
Environment