Add Custom Font Size and Trigger Icon Size to PrimeNG Dropdown

Question

I have been working with PrimeNG as the UI library to an Angular TypeScript application I have been developing and I have been having trouble customizing the font size styling and the dropdown trigger icon styling of the PrimeNG dropdown that I have put together. It seems the styling documentation for PrimeNG is rather vague on how to customize it.

No matter how I try to adjust it, the font size does not change within the dropdown. I am not sure if I should use the inline style in html, a property in TypeScript, or override the PrimeNG CSS styling to accomplish this. This also goes for the Dropdown Trigger icon.

Here is my HTML, TypeScript, and CSS.

<p-dropdown [options]="heights" [style]="{'font-size':'12px'}" [(ngModel)]="height" (ngModelChange)="adjustHeight()">
</p-dropdown>

heights: SelectItem[] = [
    {label: 'Table Size: Small', value: 'Small'},
    {label: 'Table Size: Large', value: 'Large'}
];

.p-dropdown {
    font-size: 12px !important;
}

.p-dropdown-trigger {
    font-size 12px !important
}

Update: Using what was suggested below and a simple adjustment to the style class referred to in PrimeNG I was able to change the font size of the text in a p-dropdown with:

:host ::ng-deep .p-dropdown-label {
    font-size: 12px !important;
}

Aakash Garg · Accepted Answer · 2020-12-14 16:27:24Z

1

try this :-

:host ::ng-deep .p-dropdown {
    font-size: 12px !important;
}

:host ::ng-deep .p-dropdown-trigger {
    font-size 12px !important
}

answered Dec 14, 2020 at 16:27

Aakash Garg

11k2 gold badges11 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Nic Falcione Over a year ago

I was able to change the font size of the dropdown text using :host ::ng-deep .p-dropdown-label { .... } , but for some reason the dropdown trigger icon sizing won't change even with this method.

Aakash Garg Over a year ago

@NicFalcione can you provide a stackblitz?

Nic Falcione Over a year ago

stackblitz.com/edit/angular6-primeng-mrtijv?file=src/app/…

Antikhippe Over a year ago

You should replace .p-dropdown-trigger with .p-dropdown-trigger-icon.

java-addict301 Over a year ago

didn't work....

Collectives™ on Stack Overflow

Add Custom Font Size and Trigger Icon Size to PrimeNG Dropdown

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related