Declined
Last Updated: 31 Jan 2023 09:59 by ADMIN
Oleh
Created on: 24 Jan 2023 14:31
Category: Kendo UI for jQuery
Type: Bug Report
0
Kendo ComboBox and DropDownList controls are conflicting with kendo PanelBar.

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:

  1. Create a kendo PanelBar with one item
  2. In the previously created panel's bar item create a list
  3. Add input value in one of the list items
  4. Add ComboBox or DropDownList kendo control to the input
  5. Both controls will have detached the dropdown elements
  6. You can run the piece of code in dojo to reproduce the issue (https://dojo.telerik.com/OZoXiPEy)

Expected behavior
ComboBox or DropDownList controls should work correctly and the dropdown elements of controls should not be detached.

Attached Files:
1 comment
ADMIN
Neli
Posted on: 31 Jan 2023 09:59

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.