CODEWITHSUNDEEP
kendo-uikendo-autocomplete
done_merson
done_merson

Reputation: 2998

Kendo autocomplete truncates selected value

Kendo obstruction

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 
            });
        });

Upvotes: 1

Views: 272

Answers (1)

done_merson
done_merson

Reputation: 2998

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).

Upvotes: 0

Related Questions