web-dev-qa-db-fra.com

texte de droite aligner le composant de matériau du panneau d'expansion de tapis

Je souhaite aligner le texte de description de mat-expansion-panel composant à droite

J'ai essayé d'utiliser align-text à droite mais rien ne change Voici mon 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;
}

Voici le comportement réel

example

Je voudrais que ce 2014-2017 reste coincé à droite.

htmlcssangularangular-material
11
Hamza Haddad

Le contenu de l'en-tête du panneau est contenu dans une plage qui est un flexbox afin que vous puissiez l'utiliser pour pousser le contenu sur les côtés.

vue:

<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 (ce doit être un css global, par exemple styles.css pas dans le style du composant):

.right-aligned-header > .mat-content {
    justify-content: space-between;
}

.mat-content > mat-panel-title, .mat-content > mat-panel-description {
  flex: 0 0 auto;
}

Voici une démo Stack Blitz

10
JayChase

Basé sur cette solution: https://github.com/angular/components/issues/10024

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

et relisant le problème, cela a fonctionné pour moi:

.mat-expansion-panel-header-description {
  display: flex;
  justify-content: flex-end;
}
1
Dieter