右文字对齐 mat-expansion-panel 材料组件

Question

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.

Answer 1

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

Answer 2

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;
}

Answer 3

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

StackBlitz

Answer 4

Add fxLayoutAlign="end" to mat-panel-description. It worked for me.

'<mat-panel-description fxLayoutAlign="end">
2014-2017
</mat-panel-description>'