How To Position Correctly the DropDownList PopUp in PanelBar
Environment
| Product | Progress® Kendo UI® PanelBar for jQuery | Progress® Kendo UI® DropDownList for jQuery |
Description
If DropDownList/ComboBox component is included inside a Kendo PanelBar, the popup is detached from the DropDownList/ComboBox inputs. How I can position the DropDownList/ComboBox popup correctly when the component is placed inside a PanelBar?
Solution
The described appearance may occur when the DropDownList/ComboBox is used inside the PanelBar content element, as styles are applied to the PanelBar that will affect also the nested widgets. However, in such scenarios:
- You can wrap the element from which the DropDownList/ComboBox is initialized.
- Then configure the
appendTooption. - Set the
topandleftposition of the animation container toinitial.
<ul id="panelbar">
<li>Item 1
<ul>
<li ><span id="ddl-container"><input type="text" id="ddl"/></span></li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>Item 2
<ul>
<li>Sub Item 1 <li><span id="cb-container"><input type="text" id="combo"/></span></li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
</ul>
<script>
$("#panelbar").kendoPanelBar();
$("#ddl").kendoDropDownList({
dataSource: [
{ name: "Apples" },
{ name: "Oranges" }
],
dataTextField: "name",
dataValueField: "name",
popup: {
appendTo: $('#ddl-container')
}
});
$("#combo").kendoComboBox({
dataSource: [
{ name: "Apples" },
{ name: "Oranges" }
],
dataTextField: "name",
dataValueField: "name",
popup: {
appendTo: $('#cb-container')
}
});
</script>
<style>
.k-animation-container{
top: initial !important;
left: initial !important;
}
</style>