How to adjust the font size and font style for the [pageSizeOption] in mat-paginator

I am having trouble adjusting the font-size of the [pageSizeOptions] in my mat-paginator element in the application.

<mat-paginator [pageSizeOptions]="[10, 20, 30]"></mat-paginator>

The "10" appears too small compared to the text "items per page" displayed next to it.

Even CSS modifications did not work as expected:

.mat-paginator {
    font-family: 'Raleway'!important;
    font-size: large!important;
}

I tried using theme.scss for a solution:

$custom-typography: mat-typography-config(
  $font-family: '"Raleway", "sans-serif"',
  $body-2:        mat-typography-level(16px, 24px, 600)
);

@include mat-core($custom-typography);

However, I have not been able to make it work. Any suggestions on how to achieve this?

htmlcssangularangular-materialpaginator

Answer №1

If you're looking to customize your styles, consider using ::ng-deep in your CSS file:

::ng-deep .mat-select-value {
  font-size: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

::ng-deep .mat-option-text {
  font-size: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

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

Having trouble retrieving information from the API in Angular

Error: There was a Forbidden error (403) when trying to access the URL . xyz.service.ts import { Injectable } from '@angular/core'; import { HttpErrorResponse } from "@angular/common/http"; import {Http, Response} from '@angular/http&ap ...

angular

The issue with the functionality of position absolute in CSS when used with JavaScript

<html> <head> <style> #wrapper{ position: absolute; top : 250px; width: 500px; height: 500px; border: 1px solid red; } .tagging{ position: absolute; border: 1px solid black; width : 20px; height: 30px; } & ...

javascriptcss

Tips for Observing angular forkJoin for multiple responses during unit testing with Jasmine

Currently, I am focusing on unit testing and I have a function that makes multiple API calls simultaneously. Although I have used spyOn on the service function, I am facing difficulty in returning multiple responses. Can anyone provide guidance on where I ...

angularunit-testingjasmine

Strange behavior observed with CSS intellisense in Visual Code

While working on a ReactJS project, I noticed that when I opt for the style Jsx Attribute for inline CSS, . CSS intellisense seems to not work or only work after I manually add some fields. However, if I manually type the style attribute without using t ...

cssreactjsvisual-studio-codeintellisense

Utilizing Timer Control for Image Rotation in Presentations

I have two sets of images named Div1 and Div2 that need to be displayed in a slideshow. The condition is as follows: For the first seven days, I want the images from the first set, Div1, to appear in the slideshow. Once the seven days are over, the images ...

c#htmlsqlasp.nettimer

The mysterious case of the vanishing close button on Curator.io's mobile

Currently, I am using curator.io aggregator to showcase my Instagram feed on the website. An issue arises when switching to mobile view as the close button (class="crt-close") disappears. You can see an example of this here: To replicate the pr ...

javascripthtmlcss

How to Create Django Templates without Including head, body, and Doctype?

Is it considered the correct or recommended practice to omit the Doctype, head, and body tags? This is a question that arises when looking at examples like tutorial 3 in the Django documentation which can be found here, specifically in the polls/template ...

pythonhtmldjango

What is the most effective method for incorporating personalized React components in the midst of strings or paragraph tags

Summary: Exploring the frontend world for the first time. Attempting to integrate custom components within p-tags for a website, but facing challenges in making them dynamically changeable based on user interaction. Greetings all! As a newbie in front-end ...

javascripthtmlcssreactjs

Can an RMD file access a CSS variable?

In my .Rmd file, I am interested in adjusting the style based on whether it is viewed on a mobile device or not. Checking window width with @media in CSS makes this task simple. Let's consider a scenario where there is a root variable --mobile: 1; ...

javacssrr-markdown

Selecting radio button does not update corresponding label

I am having an issue with setting a radio button as checked. In the example snippet, it works perfectly fine but on my localhost, it is not working. Even though the input gets checked, the label does not change. Surprisingly, if I set another radio button ...

javascriptjqueryhtmlcssradio-button

Choosing between JavaScript and Handlebars.js depends on the specific needs

Can anyone explain the advantages of utilizing Handlebars.js or similar libraries over solely relying on JavaScript? Thus far, I haven't come across any functionality in Handlebars that cannot be achieved with just pure JavaScript. ...

javascripthtmlcssnode.jshandlebars.js

The "read more" button seems to be malfunctioning

I've been working on integrating a gallery of images into my posts. My goal is to display 4 images initially, followed by a "load more" button that, when clicked, will reveal another set of 4 images, and so on. I have already created the HTML, CSS, an ...

javascriptjqueryhtmlcssbutton

Enhance your website's accessibility by using JavaScript to allow the down and up arrow keys to function

Thank you for taking the time to read this, any feedback is greatly appreciated. The current script on my website is only partially functional (click "i" in the bottom right corner). Currently, the script will focus on the first link AFTER pressing the T ...

javascriptjqueryhtmlaccessibility

Tips for utilizing functions in an inline HTML translation pipe

My objective is to streamline the code by using the Angular translate pipe. Currently, I find myself using 8 curly brackets and repeating the word "translate" twice... there must be a more efficient approach. Here is my current code setup: <s ...

angulartypescriptangular-translatengx-translate

When attempting to reload a single page application that utilizes AJAX, a 404 error is encountered

Recently, I've been working on coding my personal website and have successfully created a single page application using ajax. The content is dynamically loaded between the header and footer whenever a navigation bar link is clicked. To enable the back ...

javascripthtmljqueryajax

Ways to maximize the amount of content contained within a box

My current struggle involves meeting the requirements of my customers. I have a small box (230px x 200px) with an image that will display a list on hover. However, the customer now wants more items in the list than can fit in the box. Scrolling within the ...

javascriptjqueryhtmlcss

The tree expansion does not activate the CSS transition

Currently, I am in the process of creating a TreeView using only CSS and JS. My goal is to include a subtle transition effect when expanding or collapsing a node. The transition effects are successfully implemented for collapsing nodes, however, they do no ...

javascripthtmljquerycsstransition

"Adjusting the width of columns in a Datatable

I have arranged a data table with multiple rows and columns, and I am seeking guidance on how to increase the width of the "Tel. 1, Tel. 2, and Fecha" columns to ensure that the text appears on a single line. I've attempted adjusting the s width and t ...

javascripthtmlcssdatatables

Exploring the use of @HostListener in Angular for handling drop events

I am currently working on developing a directive for drag and drop functionality with files. I have successfully implemented the dragenter and dragleave events, but for some reason, the drop event is not being recognized. @HostListener('drop', [ ...

javascriptangulardrop

Alignment in the vertical direction of two lines

I've been struggling to align some HTML elements visually the way I want. There are two lines of text followed by a link. I'm trying to get the link to be vertically centered between the two lines, rather than just after the second line. Using a ...

htmlcssalignment