Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

right text align mat-expansion-panel material component

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

example

I would have that 2014-2017 stay stuck to the right.

like image 413
Hamza Haddad Avatar asked Mar 19 '18 23:03

Hamza Haddad


People also ask

How to disable expansion panel in angular material?

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.

What is an expansion panel?

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.

How can I prevent a mat expansion panel from opening when clicked?

Prevent Clicking the toggle in perticular button in mat-expansion-panel-header. using this you can prevent clicking on perticular element (click)="!


2 Answers

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

like image 174
JayChase Avatar answered Sep 29 '22 17:09

JayChase


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;
}
like image 23
Dieter Avatar answered Sep 29 '22 18:09

Dieter