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 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 http://demos.telerik.com/kendo-ui/styling/index )

    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,

    Emanuele

    <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%;" />
      </span>               
    </div>
     
    <script>
        $(document).ready(function () {
            var data = [ "Italy", "Vatican City" ];
     
            $("#countries").kendoAutoComplete({
                dataSource: data,
                filter: "startswith",
                placeholder: "Select country...",
                separator: ", "
            });
        });
    </script>
  2. Joana
    Admin
    Joana avatar
    109 posts

    Posted 20 Feb Link to this post

    Hello Emanuele,

    By design, the AutoComplete widget renders the clear icon to the right. You could find an example here: http://demos.telerik.com/kendo-ui/autocomplete/index. 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%;" />             
    </div>

     

    Regards,
    Joana
    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