调整Kendo MuliSelect Tag Width以填充enitre输入

Question

我有一个Kendo MultiSelect，MaxSelectedItems设置为1，因此用户只能选择一个值。我想让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;
}