Styling controls inside Kendo UI for Angular filter component

[Annette]

Hello - I want to style the dropdowns that are inside the Kendo Angular filter component without overriding Kendo dropdown styles. For example, I'd like to increase the width and set font size. Is there a way to do this?

 

[Zornitsa]

Hi Annette,

Thank you for the provided screenshot.

The DropDownLists that represent the filter fields in the Kendo UI for Angular Filter component particularly can be styled by using the following CSS selector:

.k-filter-field .k-dropdownlist {
      width: 100%;
      font-size: 20px;
}

As also observed in the above code snippet, the width of the DropDownLists should be set to 100% in case it is desired for the elements to adapt their width depending on the length of the contained value inside.

It is important to mention that in order for such custom styles to be applied locally, the encapsulation property of the component should be set to "ViewEncapsulation.None".

Below you can find a StackBlitz example, demonstrating the results from the above suggestion:

• https://stackblitz.com/edit/angular-qpmtrx 

I hope the provided information is helpful. Let me know if any additional questions arise.

Regards,
Zornitsa
Progress Telerik