Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Weird behaviour on Autocomplete with (left-)padding-left

1 Answer 107 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Tayger
Top achievements
Rank 1
Iron
Tayger asked on 08 Nov 2015, 11:17 PM

Its ok the Telerik widgets come also with its own CSS styles. I have the requirement to add a left-padding on a autocomplete widget but doing so the widget shows weird displaced items on screen. I have prepared a simple example you can try right away:

It does the padding as you can see when clicking on the input textbox. But there is a grey area in the background that looks displaced. Any reasons why and how I can fix it?

<!DOCTYPE html><br>
<html><br>
<head><br>
    <meta charset="utf-8"><br>
    <title>Kendo UI Snippet</title><br>
<br>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css"><br>
<br>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><br>
</head><br>
<body><br>
  <br>
<div id="autocompletediv"><br>
<input id="autocomplete" name="autocomplete" class="b_shadowrightdown" style="padding-left:20px;"><br>
</div><br>
<br>
<script><br>
$("#autocomplete").kendoAutoComplete({<br>
  dataSource: {<br>
    data: ["One", "Two"]<br>
  }<br>
});<br>
<br>
</script><br>
</body><br>
</html>

Kind Regards

 

1 Answer, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 10 Nov 2015, 04:20 PM
Hi ,

When initialized Kendo UI AutoComplete widget is wrapped in a <span> element (inspect the rendered HTML). Take a look at this dojo which demonstrates a possible implementation of the desired outcome. 

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
AutoComplete
Asked by
Tayger
Top achievements
Rank 1
Iron
Answers by
Iliana Dyankova
Telerik team
Share this question
or