Editing CSS for PrimeNG Components

Viewed 12688

I am currently developing a user interface using Angular 4, Angular Materials and PrimeNG components.

The latest component I am battling with is the MultiSelect Component from PrimeNG: https://www.primefaces.org/primeng/#/multiselect

I am simply just trying to make the component's width fit 100% of the parent component.

Is there a specific process I need to follow to edit CSS classes for this component? The documentation says to use "Style" for inline - does this mean:

<p-multiSelect [options]="cars" [(ngModel)]="selectedCars" [defaultLabel]="defaultLabel" style="width: 100%;"></p-multiSelect>

Because this did not work.

It also says to use "styleClass" as a property to add a styling CSS class. How do you use this?

Lastly, they provide a list of the CSS classes the PrimeNG component uses on the website (e.g. ui-multiselect). When I attempt to modify 'ui-multiselect' by declaring it within the Angular components CSS, it still doesn't work.

Any ideas? What am I doing wrong?

1 Answers
Related