Adjust the height of MatPaginator

I need to adjust the height of the MatPaginator in my application as it is taking up too much space.

One way to reduce the height is by using the following CSS:

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

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

You can see the result here: https://i.sstatic.net/9kHi2.png

However, the pageSize selector does not adapt well to this size change.

What would be a more effective solution?

Try out the solution on StackBlitz: https://stackblitz.com/edit/angular-kqewpc?file=src/styles.scss

angulartypescriptangular-materialmat-pagination

Answer №1

I wouldn't necessarily recommend it, but you could try something like the following:

.custom-pagination {
  min-height: 35px;

  .pagination-item-size {
    height: 100%;
    margin-top: -21px; // decrease in height from original (56px) to new height (35px)
  }

  .pagination-range-actions {
    height: 100%;
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error encountered while loading a plugin in Typescript and RequireJS compilation process

Currently, I am working on a Typescript application in Visual Studio 2015 where RequireJS is used for loading modules. I have successfully loaded various modules from .ts classes and external libraries by using their typing .d.ts files. However, I have en ...

typescriptrequirejs

import types dynamically in TypeScript

One of the files I have is called MyFactory.ts. Here is its content: export type CommandFactory = () => string[] | undefined; export enum FactoryIds {commandFactory : 'commandFactory'} Now, my goal is to dynamically import this file into anot ...

typescript

The Angular application is showing "&#40" instead of "("

When I make an HTTP request and receive JSON data, I encounter a problem when displaying it in my HTML using curly braces {{}}. Certain characters like "(" appear as "&#40". Is there a way to convert these special characters back to their normal form? ...

angular

Access the document within the Angular Material File Selection feature

I have implemented a Material file selection feature in my project. The code snippet below shows how I am doing it: <label for="uploadPicture" class="upload-file"> <mat-icon>add_a_photo</mat-icon> </label> <input type="file" ...

angulartypescriptangular-material

What steps are involved in adding Angular Material to an Angular 2 Application?

I've recently set up an Angular 2 project using Angular CLI. Following the step-by-step guide on Angular Material's website at https://material.angular.io/guide/getting-started, I expected my website to be themed with Angular Material after imple ...

angularmaterial-designmaterial-uiangular-material2

By pairing delay(0) with refCount(), we can achieve optimal efficiency

The refCount operator is discussed in this article. It explains the necessity of adding delay(0) to prevent unsubscription of observable A: import { Observable } from "rxjs/Observable"; const source = Observable.defer(() => Observable. ...

javascriptangulartypescriptrxjs

Should Redux be implemented in an Angular application?

In the current scenario, there is a debate regarding the incorporation of Redux in the Angular application. There are uncertainties surrounding the need and effectiveness of using Redux. The application consists of multiple hierarchical structures, sometim ...

angularredux

The authentication0 router fails to initiate navigation

I'm currently using Auth0 in combination with Angular 2. The issue I am encountering is that my login code isn't redirecting to the home page after authentication. Based on my understanding, Auth0 does not handle the redirection process itself. ...

javascriptangularauth0

Incorporating media queries in Angular5 with Sass and the latest version of Bootstrap (4.1.3)

Currently, I am working on a project with multiple pages. The web version of the project is almost complete, and now I need to focus on making it responsive. Since I am new to Angular, I am seeking advice on how to add media queries in Angular 5 using SASS ...

angularsassbootstrap-4angular5media-queries

Vue will display only the most recent component that has been registered

In Vue, it always renders the last registered component and ignores any others, even if they are not used at all. //main.ts import Vue from 'vue'; Vue.component('component-one', require('./components/ComponentOne.vue')); ...

typescriptvue.jsvue-component

Identify the distinct item by its name within the array

I need assistance in filtering out unique place names from the list Array's places Array. Below is an example of the array data=> "list":[ { "id":1, "uID": 1 "places":[ { ...

javascriptarraystypescript

The type 'T' cannot be assigned to type 'ObjectLiteral'

I am looking to implement the generic repository/service pattern in the following manner import { EntityTarget, FindOptionsWhere } from "typeorm"; import { AppDataSource as db } from "../database"; export const getAllSerivce = async ...

typescriptexpresstypeormtypescript-generics

Issue with React Redux: Store dispatch not causing component update

I have recently implemented React Redux in my project, but I seem to be encountering some issues. Despite changing the state, the value remains the same. I attempted to use useStore(), but it does not take any parameters. Can anyone provide insight into wh ...

reactjstypescriptredux

Problem with Route Navigation in React using TypeScript and Snowpack

I am encountering a path mapping issue in my project using React, TypeScript, and Snowpack. Below is the folder structure: https://i.sstatic.net/8rUFl.png tsconfig.json https://i.sstatic.net/5i27T.png snowpack.config.js https://i.sstatic.net/Ipfko.png ...

reactjstypescriptsnowpack

What is the method for filtering out specific fields in a template string?

I am currently working on defining constraints for the method field type event = { [k: `on${string}`]:(e:string)=>void } However, I need the event argument to be a number for fields that do not begin with 'on' type event = { [k: ` ...

typescript

The error message indicates that the argument cannot be assigned to the parameter type 'AxiosRequestConfig'

I am working on a React app using Typescript, where I fetch a list of items from MongoDB. I want to implement the functionality to delete items from this list. The list is displayed in the app and each item has a corresponding delete button. However, when ...

javascriptreactjstypescriptmongodbaxios

When is the scrollHeight determined?

I'm currently working on implementing a CSS transition within an accordion element that I am creating with Angular 7. To ensure proper display of the content inside, I have opted to use overflow-y: visible; as I will not be using this element personal ...

javascriptangulartypescript

Is it advisable to include JavaScript files produced by TypeScript in the gitignore when creating a library?

As I develop my library, my TypeScript files reside in the src directory. To streamline the process, I have set up the tsc compiler to generate JavaScript files in a separate js folder, with the final bundled scripts stored in a dist folder. Considering t ...

gittypescriptnpm

Conditional validations in Angular are a powerful tool that allows

Within my Angular form, I am utilising the mat form field and the code for one of the attributes is displayed below. <mat-form-field appearance="fill"> <mat-label>CountryCode</mat-label> <input formControlName="CountryCode" matInp ...

angularangular6angular7angular8

The error "commands.reduce is not a function" is encountered when using the router.navigate function in

When I try to send a string as a link to my router, such as "/blog/pages/3", I encounter the error "commands.reduce is not a function". Surprisingly, despite the error message showing up in the console, the navigation still works. goToPage(link) { this ...

angular