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

It looks like a conflict between your css and kendo.bootstrap.min.css. Actualy you are also missing the X icon on the right side of your choice items. Try to change to a different skin like kendo.material.min.css and check the results. — CMartins, May 29 '19 at 09:37

score 0 · Answer 1 · answered May 29 '19 at 16:40

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

Kendo autocomplete truncates selected value

1 Answers1