By fila

2017-08-04 06:44:07 8 Comments

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:

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?


@Haseoh 2017-08-04 06:47:48

For inline PrimeNG styling, use something like this:

[style]="{'width': '100%'}"

To use styleClass simply add:


This way, for example, you can style multi select input field with many different style classes, eg. Bootstrap's form-control.

When you operate with PrimeNG ui's, be sure to put them into components .css. If you use global styles.css, you'll have to override the PrimeNG files in .angular-cli.json. You can do it by editing styles array like this:


When the styles.css are put after the primeng resources, it is loaded after the primeng's, which will override the styles.

@fila 2017-08-06 11:41:57

Worked perfectly. This should be part of the PrimeNG documentation! Thank you!

@Haseoh 2017-08-06 12:07:34

Glad I could help :)

@intotecho 2018-02-27 00:32:37

note that styleClass can only add styles to the component, not override ui styles. see…

Related Questions

Sponsored Content

17 Answered Questions

[SOLVED] When to use margin vs padding in CSS

  • 2010-02-03 03:20:12
  • Alex Angas
  • 663393 View
  • 2074 Score
  • 17 Answer
  • Tags:   css padding margin

30 Answered Questions

[SOLVED] Convert HTML + CSS to PDF with PHP?

38 Answered Questions

[SOLVED] How do I vertically center text with CSS?

19 Answered Questions

[SOLVED] Is it possible to apply CSS to half of a character?

28 Answered Questions

[SOLVED] How do I give text or an image a transparent background using CSS?

  • 2009-04-30 09:00:02
  • Stijn Sanders
  • 1497453 View
  • 2085 Score
  • 28 Answer
  • Tags:   html css opacity

33 Answered Questions

[SOLVED] Change an HTML5 input's placeholder color with CSS

43 Answered Questions

[SOLVED] How can I transition height: 0; to height: auto; using CSS?

17 Answered Questions

[SOLVED] How do CSS triangles work?

26 Answered Questions

[SOLVED] Is there a CSS parent selector?

  • 2009-06-18 19:59:36
  • jcuenod
  • 1570871 View
  • 2681 Score
  • 26 Answer
  • Tags:   css css-selectors

26 Answered Questions

[SOLVED] Set cellpadding and cellspacing in CSS?

Sponsored Content