align Angular Material form-field and paginator

0
votes

I am trying to align the Angular Material mat-form-field and mat-paginator on the same line. I would like the form field flush to the left, and paginator flush to the right. There is too much padding as is. Can anyone help?

<div class="container-fluid">
  <div class="row">
    <div class="col-6">
      <mat-form-field>
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search:">
      </mat-form-field>
    </div>
    <div class="col-6">
      <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
    </div>
  </div>
</div>
1
angularangular-material2

1 Answers

2
votes

Problem solved. I added a css style for the row.

.spaceBetweenFlex {
  display: flex;
  flex - direction: row;
  justify - content: space - between;
}
<div class="container-fluid">
  <div class="row">
    <div class="col-12 spaceBetweenFlex">
      <mat-form-field>
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search:">
      </mat-form-field>
      <div>&nbsp;</div>
      <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
    </div>
  </div>
</div>