[NickTheDeveloperParticipant]

For any future people with this issue. I was able to achieve my goal by using firebug to find <div id=”#innterListBoxMatterArrangementDropDown”>…</div>
This is the div that contains the body of the dropdown list. I then added an if statement that you will see below:

initializeMatterArrangment: function () {
        $("#MatterArrangement").show();
        var MatterDDL = $("#MatterArrangementDropDown"); //dropDownHeight: 300,
        MatterDDL.jqxDropDownList({
            selectedIndex: 0, width: 170, height: 25, theme: 'bootstrap', source: Attorney.dashboardSettings.MatterStatuses, displayMember: "MatterLabel", valueMember: "MatterCode", autoDropDownHeight: true,
            renderer: function (index, label, value) {
                // dropDownWidth must be set according to your jqxDropDownList "width" property
                var dropDownWidth = 25;
                if (label.length > dropDownWidth) {
                    var temp = label.substr(0, 20) + "- <br/>" + label.substr(20, 25);
                    return temp;
                }
                return label;
            }
        }
        );
        if ($('#innerListBoxMatterArrangementDropDown').height() > 300) { // checks to see if the combined height of my items is greater than the ..
            MatterDDL.jqxDropDownList({autoDropDownHeight: false, dropDownHeight: 300 });     //..desired max height for my list box
        }

Thank you Ivo for your assistance.

[NickTheDeveloperParticipant]

Setting autoDropDownHeight to true seems to override the dropDownHeight property. When I have them both, the dropdown expands to match the height of all of my items. I would like it to be responsive in height up until the items reach 300px. At that point, it will stop growing and will have the vertical scrollbar.

[NickTheDeveloperParticipant]

Ivo,

I really appreciate your help with the last question. I am now wondering if there is a way to set a max height for the same dropdown list. I know that there is the dropDownHeight property that will set a constant height for the dropdown, regardless of how many items there are in it. Is there a function that makes it responsive? Refer to my drop down list below:

var MatterDDL = $("#MatterArrangementDropDown"); //dropDownHeight: 300,
        MatterDDL.jqxDropDownList({
            selectedIndex: 0, width: 170, height: 25, dropDownHeight: 300, theme: 'bootstrap', source: Attorney.dashboardSettings.MatterStatuses, displayMember: "MatterLabel", valueMember: "MatterCode", autoDropDownHeight: false,
            renderer: function (index, label, value) {
                // dropDownWidth must be set according to your jqxDropDownList "width" property
                var dropDownWidth = 25;
                if (label.length > dropDownWidth ) {
                    var temp = label.substr(0,20) + "- <br/>" + label.substr(20,25);
                    return temp;
                }
                return label;
            }
       
        });

I have the dropDownHeight set to 300px, so if the list is longer than 300px it adds a vertical scrollbar. However if the items in list are 150px in height, there is 150px of whitespace. I am looking for a function that changes the dropDownHeight to match the number of items accordingly, until it reaches the max of 300px.

Any help is appreciated.

[NickTheDeveloperParticipant]

Great! Thank you!

[Author]

Posts