CODEWITHSUNDEEP
angularangular-material
VenomBerry
VenomBerry

Reputation: 301

How to align angular material datatable header of the column content vertically?

I am using angular material datatable, i want to align the contents of the header of a column vertically. I used br or p tag but it didn't work. The contents of the header of the column are still aligned horizontally. Here is the code of the header.

Upvotes: 0

Views: 532

Answers (1)

Amnah Razzaki
Amnah Razzaki

Reputation: 502

You can use flex, set all the contents inside a parent. and on that parent set display: flex; flex-direction: column

 <th mat-header-cell *matHeaderCellDef matSort >
  <div class="flex-container">
      <span>Name</span>
      <input *ngIf="true" class="form-control" [(ngModel)]="selectInput" >
      <select *ngIf="true" [(ngModel)]="selectValue" class="form-control">
        <option [value]="item" *ngFor="let item of options">{{item}}</option>
      </select>
  </div>
</th>

.flex-container{
  display: flex;
  flex-direction: column;
}

Stackblitz

Upvotes: 1

Related Questions