Remove arrow from

[Kamil]

How to remove this arrow from kendo-dropdownlist/DropDownListComponent in Kendo UI for Angular? I have tried provided solutions for older version of kendo, but it doesn't work in kendo 11.6.0 and later.

[Hetali]

Hi Kamil,

In order to remove the arrow icon from the Kendo UI DropDownList component, use the following CSS:

.k-dropdownlist .k-input-button {
  display: none;
}

I have removed the arrow in this StackBlitz demonstration. Make sure to set the encapsulation to ViewEncapsulation.None to apply the component style globally.

I hope this helps. Let me know if I can further assist you.

Regards,
Hetali
Progress Telerik

[Kamil]

Hi Hetali,

Thanks for your answer."Make sure to set the encapsulation to ViewEncapsulation.None to apply the component style globally." This is something I want to avoid. In our app there are other dropdowns and we want to keep arrow on them. Is there any other solution without removing arrow globally?

Regards,
Kamil

[Hetali]

Hi Kamil,

To avoid removing the arrow icon from other dropdowns, use the id attribute in the dropdown where you want to hide the arrow. For example:

<kendo-dropdownlist id="hideArrow" [data]="areaList"></kendo-dropdownlist>

#hideArrow.k-dropdownlist .k-input-button {
  display: none;
}

In this updated StackBlitz example, the arrow icon is removed from one dropdown component only.

Let me know if I can further assist you.

Regards,
Hetali
Progress Telerik

[Kamil]

It works! Thanks!