Currently, I have a few kendo Comboboxes in one line on my page and I am using MVVM to bind values to it. Each Combobox has the same template:
<input data-role="combobox"
data-auto-bind="false"
data-text-field="ContactName"
data-value-field="Id"
data-value-primitive="true"
data-placeholder="Select Contact"
data-bind="value: @valueBinding, source: myContacts, events: { change: onChange }"
style="width:100%" />
As far as page can be opened on mobile devices, I should support text-overflow ellipses, to show for example "The first..." instead of "The first item".
I tried next solutions:
1) Just add css style for inputs:
.k-combobox .k-input {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
This Solution is working only during resizing but not after page is opened.
2) Add new css class ellipses-input
input.ellipses-input{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;
}
After data were loaded to comboboxes(using ajax request and kendo.bind) I use next jQuery code:
$(".my-container input").addClass("ellipses-input");
Here ".my-container" is just a div wrapper on comboboxes.
Are there any way to solve this problem just using CSS without jQuery?
