调整 Kendo 多选标签宽度以填充整个输入

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