Height issues with jqxDropDownList while inside jqxToolBar

[thelintsParticipant]

It seems there’s an issue with using DropDownLists inside of Toolbars, if your list is long. In my case, I’ve got 25 items, and when the list opens, it overflows the visible section of the window, causing scrollbars to appear. No amount of tweaking the autoDropDownHeight, dropDownHeight, height, enableBrowserBoundsDetection properties work to fix it.

I’ve tested the exact same DropDownList outside of the toolbar and it behaves as expected.

Here’s my problematic code:

var source = [
    "2020-01-31",
    "2020-01-30",
    "2020-01-29",
    "2020-01-28",
    "2020-01-27",
    "2020-01-26",
    "2020-01-25",
    "2020-01-24",
    "2020-01-23",
    "2020-01-22",
    "2020-01-21",
    "2020-01-20",
    "2020-01-19",
    "2020-01-18",
    "2020-01-17",
    "2020-01-16",
    "2020-01-15",
    "2020-01-14",
    "2020-01-13",
    "2020-01-12",
    "2020-01-11",
    "2020-01-10",
    "2020-01-09",
    "2020-01-08",
    "2020-01-07",
    "2020-01-06",
    "2020-01-05",
    "2020-01-04",
    "2020-01-03",
    "2020-01-02",
    "2020-01-01",
    "2019-12-05",
    "2019-12-04",
    "2019-10-07",
    "2019-09-18",
    "2019-09-12",
    "2019-09-06",
    "2019-09-05",
    "2019-09-04",
    "2019-08-22",
    "2019-08-21"
  ];
  $("#jqxToolBar").jqxToolBar({
    width: "100%",
    height: 45,
    tools: "dropdownlist",
    initTools: function(type, index, tool, menuToolIninitialization) {
      switch (index) {
        case 0:
          tool.jqxDropDownList({
            source: source,
            width: 200,
            height: 30,
            placeHolder: 'Date',
            checkboxes: true,
            enableBrowserBoundsDetection: true,
            filterable: true,
            dropDownHeight: 250,
          });
          break;
      }
    }
  });
  $("#jqxDropDownList").jqxDropDownList({
    source: source,
    width: 200,
    height: 30,
    placeHolder: 'Date',
    checkboxes: true,
    enableBrowserBoundsDetection: true,
    filterable: true,
    dropDownHeight: 250,
  });

I also created a JSFiddle to illustrate the issue: https://jsfiddle.net/bvc1qtfu/

Is there anything I can do to make the dropdown in the toolbar work properly?

[HristoParticipant]

Hello thelints,

You just need to set the autoDropDownHeight: false property to disabled it.
Because in the jqxToolBar it takes other settings by default.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts