CODEWITHSUNDEEP
htmlcssangularangular-material
strozster
strozster

Reputation: 49

mat-expansion-panel-header title alignment issue

I have added a button to my mat-expansion-panel: mat-expansion-panel-header in Angular Material 7.

Without the button the alignment of the title is correct but with the button it is shifted upwards. Image link below.

enter image description here

I am using the following scss to move the button to the right.

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

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

How can I get the header text to be in its normal, centered, position?

Upvotes: 2

Views: 8149

Answers (2)

Carlos Salamanca
Carlos Salamanca

Reputation: 11

Create a CSS class .headers-align and add it to your <mat-accordion class="headers-align">

The code for the CSS is this:


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

   .headers-align .mat-expansion-panel-header-description {
     justify-content: space-between;
     align-items: center;
    }

   mat-form-field {
    margin-right: 12px;
   }

Upvotes: 1

Post Impatica
Post Impatica

Reputation: 16393

I used the following:

mat-panel-title {
    justify-content: center !important;
}

Upvotes: 3

Related Questions