调整 Kendo Multi Select Tag Width 以填充整个输入

Question

我有一个 Kendo MultiSelect，MaxSelectedItems 设置为 1，因此用户只能 select 一个值。我想让 tag 完全填满输入。目前，它在自己之后留下一些 space。

我知道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 即可使此选择器更加具体

要最大化填充 space 你还应该隐藏下一个 <input>

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