AutoComplete style issue when used inside "input with icon on the left" form style

2 posts, 0 answers
  1. Emanuele
    Emanuele avatar
    3 posts
    Member since:
    Oct 2011

    Posted 16 Feb 2017 Link to this post

    Hi all,

    I have an issue with AutoComplete widget when I try to style it as "INPUT WITH ICON ON THE LEFT" (you can find an example here )

    Clear value cross is on the left instead to be on the right!

    You can use code below to reproduce the issue.

    There's anything I can do to resolve this issue?

    Many thanks,


    <div class="demo-section k-content">               
      <span class="k-textbox k-space-left" style="width: 100%;" >
        <a href="#" class="k-font-icon k-icon k-i-marker-pin"> </a>
        <input id="countries" style="width: 100%;" />
        $(document).ready(function () {
            var data = [ "Italy", "Vatican City" ];
                dataSource: data,
                filter: "startswith",
                placeholder: "Select country...",
                separator: ", "
  2. Joana
    Joana avatar
    157 posts

    Posted 20 Feb 2017 Link to this post

    Hello Emanuele,

    By design, the AutoComplete widget renders the clear icon to the right. You could find an example here: The issue in your sample stems from the usage of k-textbox k-space-left classes in a parent element of the AutoComplete. The styles of the Autocomplete get overridden and you should avoid combining css classes which apply styles to different widgets. I suggest that you add your own styles to position the pin marker and remove the unnecessary parent element.

    <div class="demo-section k-content">               
        <a href="#" class="k-font-icon k-icon k-i-marker-pin"> </a>
        <input id="countries" style="width: 100%;" />             


    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top