kendo-ui - 调整 Kendo MuliSelect 标记宽度以填充整个输入

Question

我有一个MaxSelectedItems设置为 1 的 Kendo MultiSelect，因此用户只能选择一个值。我想让tag完全填充输入。目前，它在自身之后留下了一些空间。

我知道TagMode，但我正在寻找的是标签填充了整个输入框。

这就是我正在使用的：

@(Html.Kendo().MultiSelectFor(x => x.field)
    .MaxSelectedItems(1)
    .Placeholder("")
    .DataValueField("Id")
    .DataTextField("Text")
    .AutoBind(false)
    .DataSource(ds => ds
    .Read("SelectField", "API").ServerFiltering(true))
    .ItemTemplate("#:Code# - #: Text#")
    .TagTemplate("#:Code# - #: Text#")
    .TagMode(TagMode.Single)
    .HighlightFirst(true)
)

Answer 1

您可以简单地使用 CSS：

#select_id > li.k-button {
   width: 100%;
}

只需添加一些 id 以使此选择器更具体

为了最大化填充空间，您还应该隐藏下一个<input>

#select_id ~ input {
    width: 0px !important;
    display: none;
}