In the durandal project I'm working on, where JavaScript and HTML are written on separate pages, I encountered an issue with a kendo-combo element. When I initially set the width using the wrapper-input width declaration, it worked perfectly fine. However, when I tried to bind the width dynamically, it did not work as expected. Here is the code snippet that caused the issue:
HTML:
<input id="kendoCombo" data-bind=" value:'444', style:{width:width},
kendoDropDownList: { dataSource: data,
dataValueField:itemValue,
dataTextField: itemText,
value:selectedId,
template: template,
change:onChange}" />
JavaScript:
width:ko.observable('100px')
Interestingly, when the width was hardcoded without binding, everything functioned correctly. Here is the previous version of my HTML code before attempting dynamic binding:
<input style="width:100
id="kendoCombo"
data-bind=" value: '444',
kendoDropDownList: { dataSource: data,
dataValueField:itemValue,
dataTextField: itemText,
value:selectedId,
template: template,
change:onChange} " />