jQuery UI Widgets Forums Navigation NavigationBar, ToolBar, NavBar Height issues with jqxDropDownList while inside jqxToolBar

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 3 months, 3 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • thelints
    Participant

    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?


    Hristo
    Participant

    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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.