Floating Label
A floating label is a placeholder text for form or input fields, which floats above that field and remains visible once the user starts interacting with that field.
To implement a floating label in the Kendo UI for jQuery DropDownList, define it either as a string or from a function.
The following example demonstrates how to set the floating label as a string:
<div class="container" style="width: 300px;">
<input id="dropdownlist" style="width: 100%;"/>
</div>
<script>
let data = [
{ID: 1, ProductName: "Beds" },
{ID: 2, ProductName: "Chairs" },
{ID: 3, ProductName: "Sofas"},
{ID: 4, ProductName: "Dining Tables" },
{ID: 5, ProductName: "TV stoves" }
];
$("#dropdownlist").kendoDropDownList({
autoBind:false,
dataTextField:"ProductName",
dataValueField:"ID",
filter:"contains",
label: {
content:"Select a product...",
floating:true
}
});
</script>
The following example demonstrates how to set the floating label from a function:
<div class="container" style="width: 300px;">
<input id="dropdownlist" style="width: 100%;"/>
</div>
<script>
let data = [
{ID: 1, ProductName: "Beds" },
{ID: 2, ProductName: "Chairs" },
{ID: 3, ProductName: "Sofas"},
{ID: 4, ProductName: "Dining Tables" },
{ID: 5, ProductName: "TV stoves" }
];
$("#dropdownlist").kendoDropDownList({
autoBind:false,
dataTextField:"ProductName",
dataValueField:"ID",
filter:"contains",
label: {
ccntent: function(){
return "Select a product...";
},
floating:true
}
});
</script>