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>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
</head>
<body>
<div id="autocompletediv">
<input id="autocomplete" name="autocomplete" class="b_shadowrightdown" style="padding-left:20px;">
</div>
<script>
$("#autocomplete").kendoAutoComplete({
dataSource: {
data: ["One", "Two"]
}
});
</script>
</body>
</html>
1 Answer, 1 is accepted
I replied to the same question in your other thread, however here is my answer too:
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