This is a migrated thread and some comments may be shown as answers.

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

1 Answer 282 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Emanuele
Top achievements
Rank 1
Emanuele asked on 16 Feb 2017, 10:18 AM

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>

1 Answer, 1 is accepted

Sort by
0
Joana
Telerik team
answered on 20 Feb 2017, 08:22 AM

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  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.
Tags
AutoComplete
Asked by
Emanuele
Top achievements
Rank 1
Answers by
Joana
Telerik team
Share this question
or