I want to align the description text of mat-expansion-panel
component to the right
I have tried using align-text to right but nothing is changing Here's my HTML
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
Cycle ingénieur en informatique
</mat-panel-title>
<mat-panel-description>
2014-2017
</mat-panel-description>
</mat-expansion-panel-header>
....
</mat-expansion-panel>
CSS :
mat-panel-description {
text-align: right;
}
Here's the actual behavior
I would have that 2014-2017 stay stuck to the right.
The panel header content are contained in a span which is a flexbox so you can use that to push the contents out to the sides.
view:
<mat-expansion-panel>
<mat-expansion-panel-header class="right-aligned-header">
<mat-panel-title>
Cycle ingénieur en informatique
</mat-panel-title>
<mat-panel-description>
2014-2017
</mat-panel-description>
</mat-expansion-panel-header>
css (this has to be global css eg. styles.css not in the component style):
.right-aligned-header > .mat-content {
justify-content: space-between;
}
.mat-content > mat-panel-title, .mat-content > mat-panel-description {
flex: 0 0 auto;
}
Here is a Stack Blitz demo
Based on this solution: https://github.com/angular/components/issues/10024
.mat-expansion-panel-header-description, .mat-expansion-panel-header-title {
flex-basis: 0;
}
and reading again the problem, this worked for me:
.mat-expansion-panel-header-description {
display: flex;
justify-content: flex-end;
}
The easiest solution I found is to reset flex-grow
of mat-panel-description
:
// my.component.css
mat-panel-description.right-aligned {
flex-grow: 0;
}
// my.component.html
...
<mat-expansion-panel-header>
<mat-panel-description class="right-aligned">
2014-2017
</mat-panel-description>
</mat-expansion-panel-header>
...
Add fxLayoutAlign="end" to mat-panel-description. It worked for me.
'<mat-panel-description fxLayoutAlign="end">
2014-2017
</mat-panel-description>'
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.