New to Kendo UI for jQuery? Download free 30-day trial

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:

  1. You can wrap the element from which the DropDownList/ComboBox is initialized.
  2. Then configure the appendTo option.
  3. Set the top and left position of the animation container to initial.
    <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>

See Also

In this article