JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<input data-role="dropdownlist" data-bind="source: Test"/><br/>
<input data-role="combobox" data-bind="source: Test"/>
<input data-role="dropdownlist" data-bind="source: Test"/><br/>
CSS
.k-dropdown {
width:30%;
}
.k-combobox {
width:30%;
}
JavaScript
var Lookups = {};
Lookups.Test = ["Value 1", "Value 2", "Value 3"];
kendo.bind($("input"), Lookups);
function adjustListWidth(myWidget) {
var list = myWidget.list,
width = list[0].style.width,
wrapper = myWidget.wrapper,
computedStyle, computedWidth;
if (true) {
computedStyle = window.getComputedStyle ? window.getComputedStyle(wrapper[0], null) : 0;
computedWidth = computedStyle ? parseFloat(computedStyle.width) : wrapper.outerWidth();
if (computedStyle && ($.browser.mozilla || $.browser.msie)) { // getComputedStyle returns different box in FF and IE.
computedWidth += parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight) + parseFloat(computedStyle.borderLeftWidth) + parseFloat(computedStyle.borderRightWidth);
}
width = computedWidth - (list.outerWidth() - list.width());
}
list.css({
fontFamily: wrapper.css("font-family"),
width: width
});
}
$('[data-role="dropdownlist"]').each(function (index, element) {
var ddl = $(element).data('kendoDropDownList');
if (ddl) {
ddl.bind('open', function () {
adjustListWidth(ddl);
});
}
});
$('[data-role="combobox"]').each(function (index, element) {
var cb = $(element).data('kendoComboBox');
if (cb) {
cb.bind('open', function () {
adjustListWidth(cb);
});
}
});