jQuery UI Widgets Forums Lists DropDownList Text-wrap or horizontal scrollbar removal in dropdown list

This topic contains 6 replies, has 2 voices, and was last updated by  NickTheDeveloper 8 years, 4 months ago.

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

  • NickTheDeveloper
    Participant

    I have a dropdown list in that has a horizontal scrollbar because its contents are too wide for the size of the dropdown. It is leaving me with a horizontal scrollbar that I would like to get rid of. I read a post already that there is no way to remove the horizontal scrollbar, but is there a way to add in a text-wrap so that if an item in the list is too wide it will just move the rest of the text to the next line and the height of the item will increase instead?

    Thanks.


    Ivo Zhulev
    Participant

    Hi NickTheDeveloper,

    You will find your answer here :
    https://www.jseditor.io/?key=dropdownlist-word-break

    Best Regards,
    Ivo

    jQWidgets Team
    http://www.jqwidgets.com/


    NickTheDeveloper
    Participant

    Great! Thank you!


    NickTheDeveloper
    Participant

    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.


    Ivo Zhulev
    Participant

    Hi NickTheDeveloper,

    Add the “autoDropDownHeight” property and set it to “true”.

    Best Regards,
    Ivo

    jQWidgets Team
    http://www.jqwidgets.com/


    NickTheDeveloper
    Participant

    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.


    NickTheDeveloper
    Participant

    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.

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

You must be logged in to reply to this topic.