如何在 kendoAutoComplete 上设置

Question

我已经尝试了所有我知道如何（但都失败了）的方法来正确设置 kendoAutoComplete 上的宽度。我最近的尝试（下图）是基于 JS 的，但我也尝试了很多 CSS 解决方案。

我看到的问题是，无论我选择什么宽度，实际输入区域的宽度都保持一致，然后右边有一个奇怪的灰色区域：

这是悬停状态（灰框消失）：

但不要被大文本框的外观所迷惑。以下是您开始键入时会发生的情况：

我试过：

var autoComplete = $("#gridFilter").data("kendoAutoComplete");
autoComplete.list.width(400);

和

autoComplete .wrapper.css("width", "300px");

还有...各种 CSS 解决方案。

为什么设置愚蠢的自动完成的宽度这么难？我在这里错过了什么？

我希望自动完成的宽度为 100% 以填充其容器。

如果你能帮助我理解为什么 Telerik 总是让我想伤害自己，我会加分。

编辑

好的，我（部分）明白了。我暂时从页面中删除了 bootstrap CSS，输入按预期工作。

如果我发现有问题 CSS，我会 post 在这里回答。

Answer 1

如上面的编辑所述，默认 Bootstrap CSS 与样式冲突。具体来说，max-width属性。下面的 CSS 修复了它：

<input id="gridFilter" style="max-width: 10000px; width:100%;" />

How to set with on kendoAutoComplete