I recently tested out the code from kendo on StackBlitz and it worked perfectly:
https://i.stack.imgur.com/Nrp2A.png
However, when running the same code on my localhost, all the styling for the chip is missing:
https://i.stack.imgur.com/1pUH9.png
The chip appears as a block instead of styled properly, and I'm struggling to pinpoint the reason behind this issue. So far, I haven't been able to replicate the error on StackBlitz.
Here's what I've tried so far in terms of troubleshooting:
- I stopped my localhost server and ran
npm i; npm startagain. - I checked the dependencies in both local and StackBlitz environments, and they match up in the package.json file.
https://i.stack.imgur.com/YqTKI.png
Below is the content of the component.ts file:
// Angular imports
import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { ChipRemoveEvent } from '@progress/kendo-angular-buttons';
import { AutoCompleteComponent } from '@progress/kendo-angular-dropdowns';
@Component({
selector: 'sentryx-email-chips',
templateUrl: './email-chips.component.html',
encapsulation: ViewEncapsulation.None,
styleUrls: ['./email-chips.component.scss']
})
export class EmailChipsComponent {
@ViewChild("contactslist") public list: AutoCompleteComponent;
public contacts: Array<{ label: string; iconClass: string }> = [
{ label: "Pedro Afonso", iconClass: "k-chip-avatar" },
{ label: "Maria Shore", iconClass: "k-chip-avatar" },
{ label: "Thomas Hardy", iconClass: "k-chip-avatar" },
{ label: "Christina Berg", iconClass: "k-chip-avatar" },
{ label: "Paula Wilson", iconClass: "k-chip-avatar" }
];
public selectedContacts: Array<any> = [this.contacts[1]];
public valueChange(contact: string): void {
console.log(contact);
if (contact === "") {
return;
}
this.selectedContacts.push({
label: contact,
class: `custom-style`
});
// const contactData = this.contacts.find(c => c.label === contact);
// if (!this.selectedContacts.includes(contactData)) {
// this.selectedContacts.push(contactData);
// } else {
// this.selectedContacts.push({
// label: contact,
// iconClass: "k-chip-avatar paula"
// });
// }
this.list.reset();
}
public onRemove(e: ChipRemoveEvent): void {
console.log("Remove event arguments: ", e);
const index = this.selectedContacts
.map(c => c.label)
.indexOf(e.sender.label);
this.selectedContacts.splice(index, 1);
}
}
HTML section:
<kendo-chip *ngFor="let contact of selectedContacts" [class]="contact.class" [label]="contact.label" [removable]="true"
[iconClass]="contact.iconClass" (remove)="onRemove($event)">
</kendo-chip>
<div class="example">
<kendo-autocomplete #contactslist [data]="contacts" class="contacts" valueField="label"
[kendoDropDownFilter]="{ operator: 'contains' }" [filterable]="true" placeholder="To: Email Address*"
(valueChange)="valueChange($event)">
</kendo-autocomplete>
</div>
CSS:
.k-chip {
margin-right: 10px;
}
.k-block {
min-height: 300px;
padding: 20px;
}
.k-textarea {
width: 100%;
min-height: 145px;
}
.contacts {
border-width: 0 0 1px 0;
width: 100%;
margin: 30px 0;
}
.contacts.k-state-focused {
box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.03);
}
.custom-style {
color: #6200ee;
background-color: #f3ebfe;
border-color: #6200ee;
}
UPDATE
Other kendo components seem to be working fine. For instance, the kendo dropdown above functions without any issues. I also tested the kendo button and found it to be working correctly as well:
<button kendoButton >Browse</button>