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.
For the action bar, use the mat-action-row element. To disable the panel, add the disabled directive to the panel element and set it to true. To enabled it, set it to false.
An expansion panel is a lightweight container that may either stand alone or be connected to a larger surface, such as a card. They may be used for a variety of tasks, such as: To edit a setting. To create a tool for ad campaigns.
Prevent Clicking the toggle in perticular button in mat-expansion-panel-header. using this you can prevent clicking on perticular element (click)="!
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With