Struggling with customizing the font size and dropdown trigger icon styling of a PrimeNG dropdown in my Angular TypeScript application. The documentation for PrimeNG's styling options is unclear, making it difficult to achieve the desired customization.
No matter what approach I take - using inline styles in HTML, properties in TypeScript, or overriding CSS - I can't seem to change the font size within the dropdown. The same issue persists with the Dropdown Trigger icon.
Below is the snippet of 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: Following the suggestions provided below and tweaking the style class mentioned in PrimeNG, I successfully managed to alter the font size of the text in a p-dropdown with:
:host ::ng-deep .p-dropdown-label {
font-size: 12px !important;
}