Adjusting Kendo MuliSelect Tag Width to fill the enitre input

Question

I have a Kendo MultiSelect with MaxSelectedItems set to 1, so user can select only one value. I'd like to make the tag to fill the input completely. Currently, it leaves some space after itself.

I'm aware of TagMode, but what I'm looking for is that the tag fills the entire input box.

This is what I'm using:

@(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

You can simply use CSS:

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

Just add some id to make this selector more specific

To maximize filled space you should also hide next <input>

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