Describe the bug
Kendo ComboBox and DropDownList controls are conflicting with kendo PanelBar.
If ComboBox or DropDownList control is included inside a kendo PanelBar, the the dropdown elements of both controls are detached from the combobox or dropdownlist inputs respectively.
To reproduce
In order to reproduce the behaviour:
Expected behavior
ComboBox or DropDownList controls should work correctly and the dropdown elements of controls should not be detached.
Hi Oleh,
The described appearance might occur when the DropDownList/ComboBox is used inside the PanelBar content element, as there are styles applied to the PanelBar that will effect also the nested widgets. However, in such scenarios the DropDownList and ComboBox popup.appendTo option should be used:
- https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/configuration/popup#popup.appendTo
- https://docs.telerik.com/kendo-ui/api/javascript/ui/combobox/configuration/popup#popupappendto
You can wrap the element from which the DropDownList/ComboBox is initialized.
<li><span id="ddl-container"><input type="text" id="ddl"/></span></li>
Then use the popup.appendto option to position the popup
popup: {
appendTo: $('#ddl-container')
}
You may also need to set the top and position of the animation container:
<style>
.k-animation-container{
top: initial !important;
left: initial !important;
}
</style>
Here you will find a Dojo example where the described above is implemented and the popups are rendered on the expected places.
I will proceed and will mark the issue as 'Declined' as the described appearance is expected in such a scenario.
In case you have additional questions or comments on the matter, please let me know.
Regards,
Neli
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.