Expand ComboBoxes in Bootstrap Layouts
The following example demonstrates how to expand a Kendo UI ComboBox located in a Bootstrap layout.
Basically, the approach is to set the input width to 100%.
<div class="row">
<div class="col-md-8"><input id="categories" style="width: 100%" /></div>
<div class="col-md-4">.col-md-4</div>
</div>
<script>
$(document).ready(function() {
$("#categories").kendoComboBox({
dataTextField: "CategoryName",
dataValueField: "CategoryID",
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
}
}
});
});
</script>
</div>
See Also
- ComboBox JavaScript API Reference
- How to Bypass Boundary Detection
- How to Configure Deferred Value Binding
- How to Implement Cascading with Local Data
- How to Make Visible Input Readonly
- How to Open ComboBox When onFocus is Triggered
- How to Prevent Adding Custom Values
- How to Select Items on Tab
- How to Underline Matched Search
For more runnable examples on the Kendo UI ComboBox, check its how-to articles.