Question

我已经尝试了各种方式，我知道如何（和失败）正确设置kendoAutoComplete的宽度。我最近的尝试（下面）是基于JS的，但我也尝试了很多CSS解决方案。

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

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

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

我试过了：

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

和

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

并且...各种CSS解决方案。

为什么要设置愚蠢的自动完成的宽度是如此困难？我在这里缺少什么？

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

如果你可以帮助我理解为什么Telerik会让我想要伤害自己，那么会给你带来好处。

修改

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

如果我发现有问题的CSS，我会在这里发布答案。

Answer 1

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

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