Kendo autocomplete truncates selected value

Question

I am trying to use the Kendo autocomplete component and I keep getting this grey bar that obscures part of the answer when it is selected.

Does anyone know who to fix this issue?

See my code below:

<link href="~/Scripts/Kendo/styles/kendo.common.min.css" rel="stylesheet" />
<link href="~/Scripts/Kendo/styles/kendo.bootstrap.min.css" rel="stylesheet" />

<script src="~/Scripts/Kendo/js/kendo.ui.core.min.js"></script>
<script src="~/Scripts/Kendo/js/kendo.combobox.min.js"></script>

<div class="k-content">
<input id="siteItem" placeholder="Select site..." style="width:100%"   />

$.getJSON("/FormReport/GetSites/" + org + "/" + e.dataItem.Value,
        function (data) {

            $("#siteItem").kendoComboBox({
                autoWidth: true,

                dataTextField: "Text",
                dataValueField: "Value",
                dataSource: data,
                filter: "contains",
                suggest: true 
            });
        });

Answer 1

The fix to remove the issue was style="min-width=100%". The textbox started off on page load with no data attached to it and therefore wasn't actually using the correct width. When data was added later, it doesn't recompensate to the correct width. Using min-width makes the textbox draw correctly before data gets attached dynamically and therefore removes the phantom grey box (which I believe is the X or clear button).