Set MatPaginator's height

Question

I would like to set the height of the MatPaginator, because it takes up too much space in my current application.

Currently I could reduce the height like this:

.mat-paginator-container {
  min-height: 20px !important;

  .mat-form-field-wrapper {
    padding-bottom: 0 !important;
  }
}

The result is like this:

Sadly the pageSize selector won't adjust well to the size change.

What could be a better solution?

StackBlitz: https://stackblitz.com/edit/angular-kqewpc?file=src/styles.scss

Answer 1

I definitely wouldn't advice it, but something like this seems to work:

.mat-paginator-container {
  min-height: 35px;

  .mat-paginator-page-size {
    height: 100%;
    margin-top: -21px; // difference between original height (56px) and reduced height (35px)
  }

  .mat-paginator-range-actions {
    height: 100%;
  }
}