kendo-ui-angular2

How can I modify Kendo dropdownlist background color?

I am using Kendo for Angular 14 and I am having a problem with modifying the background color of the dropdown list. From what i can gather, when the dropdown list object is opened, a new DOW object called kendo-popup is created and this is where all of the values that populate the dropdown list are stored. its this new object, I believe, that I want to be able to modify the background color of. For example, in the image below, the white color inside the red box, lets say i want to make it purple. How do i make it purple? This is all based on a users 'theme' choice. At some point in the application prior to this drop down, the user may have selected a theme. I want to apply that choice to the application. This is the only object type in the application that I can not get to change. I have tried the background-color on the dropdown list itself but that only changes the color in the green box. I have tried changing background color for the popup and for the listbox objects that are also created. I have even tried the popupSettings on the kendo-dropdown list. No luck. To be clear, I am making these css changes in a scss style sheet. if i grab the DOM element itself, i CAN change the background color through DevTools. Just not through the scss file even though all other elements change as expected. At this point Im not sure if its how im writing the css or if im overlooking something else. Any help is appreciated.

drop down list box

Solution

  • You can accomplish this in two ways:

    1. Set a class on the popup element you mentioned using the popupSettings input and then target that class in your CSS, like this:

    HTML:

    <kendo-dropdownlist [data]="listItems" [popupSettings]="{ popupClass: 'class-name' }">
</kendo-dropdownlist>

    CSS:

    ::ng-deep .class-name {
    // Change background
}

    1. Use the appendTo setting in the popupSettings input of the dropdown to make the popup appear anywhere you want in the DOM and not in the topmost level, like this:

      <kendo-dropdownlist [data]="listItems" [popupSettings]="{ appendTo: 'component' }">

    When you use appendTo: component, the popup will appear under your component element in the DOM and so you can style it as if it is part of your component. You might have to use ::ng-deep to penetrate the view encapsulation.

    You can read more about both settings here.