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

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

1 Answer 180 Views

AutoComplete

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

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.common.min.css"><br>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css"><br>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css"><br>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.dataviz.min.css"><br>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.dataviz.default.min.css"><br>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css"><br>

<br>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><br>

<script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.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

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

1 Answer, 1 is accepted