CODEWITHSUNDEEP
cssangular
Rexam
Rexam

Reputation: 913

How to style a PrimeNG Chips?

I have a form in my application where I use the following code from Primafaces:

...other inputs...

<label for="workshopTags">Tags</label>
<p-chips
    [(ngModel)]="values"
    name="workshopTags"
    id="workshopTags"
></p-chips>

I am able to display the Chip element correctly but I would like to style it putting its width to 100% and the height to 100px, but nothing seems to work to change those. This solution didn't work for me. I tried to set a styleClass or an inline style as the documentation suggest but they didn't work either. If I write inline:

style="width: 100%"

The following error is thrown:

Error: Cannot find a differ supporting object 'width: 100%;'

How can I make it work?

Upvotes: 3

Views: 11554

Answers (4)

Anupam Samanta
Anupam Samanta

Reputation: 11

To set the width to 100%, you have to use the style or styleClass attribute and set the css property display: block.

As an example using the styleClass attribute

<p-chips
    [(ngModel)]="interests"
    styleClass="block">
</p-chips>

Here I am using Prime Flex v3 with PrimeNg.

Upvotes: 0

Fateh Mohamed
Fateh Mohamed

Reputation: 21377

You can use ht /deep/ modifier ,add this inside your app.component.css and delete it from your style.css, and you don't need !important to force the style here, delete it. here is what you are looking for 

p {
  font-family: Lato;
}

/deep/  .p-chips > .ui-inputtext {
  width: 100%;
  height:  100px;
}

check it here https://stackblitz.com/edit/angular-primeng-startup-kmm7xw

Upvotes: 1

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24424

there are tow methos to style primeng component overwrite the original style or by create a custom style base on custome class

overwrite

add the style to global style.css or style.scss , this method for overwrite primeng component style without add extra class to the component.

.ui-chips {
  display: inline-block
}

.ui-chips ul {
  border:2px dashed green !important; /* 👈 I have use important */
}

 .ui-chips > ul.ui-inputtext .ui-chips-token {
    font-size: 14px;
    background: green !important; /* 👈 I have use important */
    border:1px solid #005555;
    box-shadow: 0 0 25px #ccc;
}

stackblitz demo 🍏🍏

custome style

the method above will change the style of all p-chips component in the entier project , by this method you need to set styleClass property so you can create different style like the example here 👇 , but you need to set styleClass property for every component 

<p-chips [(ngModel)]="values" styleClass="p-chips"></p-chips>

style.css

.p-chips.ui-chips {
  /* border:1px solid #ff2200; */
  display: inline-block
}

.p-chips.ui-chips ul {
  border:2px dashed orange;
}

 .p-chips.ui-chips > ul.ui-inputtext .ui-chips-token {
    font-size: 14px;
    background: orange;
    border:1px solid #ff5555;
    box-shadow: 0 0 25px #ccc;
}

stackblitz demo 🍊🍊

Upvotes: 6

Evgeniy Boytsov
Evgeniy Boytsov

Reputation: 314

You could try encapsulation: ViewEncapsulation.None in your override component decorator:

@Component({
   selector: 'app-chip',
   templateUrl: 'path-to-template where you use ui-chips',
   styleUrls: ['path-to-styles where you could override ui-chips styles'],
   encapsulation: ViewEncapsulation.None
})
export class AppChipComponent { }

Upvotes: 0

Related Questions