Hiding the dropdown arrow on the Angular ComboBox

6 posts, 0 answers
  1. Jimmy
    Jimmy avatar
    9 posts
    Member since:
    May 2017

    Posted 17 Aug 2019 Link to this post

    I need to hide the DropDown arrow on an Angular ComboBox so that it will function as an Autocomplete.  I can not use the AutoComplete control as I need to send in an id which is a number and the AutoComplete only supports strings.  If I can solve either of these issues I would be a happy camper :)
  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1282 posts

    Posted 19 Aug 2019 Link to this post

    Hi Jimmy,

    Indeed, the AutoComplete supports string values only. The most straight-forward approach to hide the dropdown arrow of the ComboBox is via CSS:

    encapsulation: ViewEncapsulation.None,
      styles: [`
        .k-combobox .k-dropdown-wrap .k-select {
          display: none;
        }
     
        .k-combobox .k-dropdown-wrap .k-clear-value {
          right: 8px;
        }
      `]

    https://stackblitz.com/edit/angular-y1piaa?file=app/app.component.ts

    I hope this helps.

    Regards,
    Dimiter Topalov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Jimmy
    Jimmy avatar
    9 posts
    Member since:
    May 2017

    Posted 19 Aug 2019 in reply to Dimiter Topalov Link to this post

    Thank you so much Dimiter.  That worked perfectly.
  4. Zhenyong
    Zhenyong avatar
    2 posts
    Member since:
    Apr 2017

    Posted 06 Aug Link to this post

    Hi Dimiter,

    I got into the same problem and tried out your solution. I found out that ViewEncapsulation.None will affect other combo box in the app. How can I set the style on one isolated component only?

     

  5. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1282 posts

    Posted 07 Aug Link to this post

    Hello Zhenyong,

    To scope the custom styling to one or several selected components only, add a custom class to each of them, and scope the custom styling CSS selector to this class, for example:

    https://stackblitz.com/edit/angular-y1piaa-lm9jyd?file=app/app.component.ts

    Regards,
    Dimiter Topalov
    Progress Telerik

  6. Zhenyong
    Zhenyong avatar
    2 posts
    Member since:
    Apr 2017

    Posted 07 Aug in reply to Dimiter Topalov Link to this post

    Thanks for your suggestion. It solved my problem!
Back to Top