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

[Emanuele]

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>

[Joana]

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