What are the kendo-dropdown customization options?

[Peter]

Dear community,

how can I style kendo-dropdown component using built-in customization mechanisms?

 

I am using in my application bootstrap stylings for Kendo components. I already saw the customization section. I would like to restyle the basic properties of a dropdown such as (but not limited to)

• Background color when the dropdown is rendered
• Padding-inline and padding-block.
• Font color and size
• Background color on focus

I hoped that there would be some variables that I could just override, as if in the case of other components such as buttons, inputs, grid, etc.

 

I already tried to override lists, as that seemed to be the most logical thing to me. However, it does not seem to be applicable here. Is such customization possible or do I need to override the styles with custom css?

Thanks for any help.

[Peter]

There are built-in mechanisms for it. For styling of a dropdown-input, take a look at customize picker section for your respective theme. For customization of the items in the dropdown, take a look at customize list section.

[Georgi]

Hi Peter,

Thank you very much for the details provided.

In general, our team logically classifies form elements either as Input or as Picker. This classification was introduced with the goal of improving the consistency of the code, and avoiding repetitions, and led to the introduction of the k-input and k-picker classes. This could be seen by inspecting the specific component in the browser and checking its corresponding styling:

With that being said, I can indeed confirm that the available variables for the Kendo UI for Angular Dropdowns are in the Customizing Picker sections of the respective Kendo theme:

https://www.telerik.com/kendo-angular-ui/components/styling/theme-bootstrap/customization-picker/

As for the customization of the items of the Dropdowns, I would suggested checking out the corresponding Customizing List articles:

https://www.telerik.com/kendo-angular-ui/components/styling/theme-bootstrap/customization-list/

For your convenience, I am sending you a possible approach for customizing the Kendo UI for Angular Dropdown using some of the suggested variables:

https://stackblitz.com/edit/angular-tyh2pa-q6cx39?file=src%2Fstyles.scss

I hope this helps. Please, let me know if I can further assist you with this case.

Regards,
Georgi
Progress Telerik