jQuery UI Widgets Forums Lists DropDownList DropDownList | Height Issue

This topic contains 5 replies, has 3 voices, and was last updated by  N.I.Alam 5 years, 11 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • DropDownList | Height Issue #23130



    I need the drop-down list height to be “auto” so I used “autoDropDownHeight: true” property to my drop-down, it is working fine in case of less values.

    Suppose, if I’m populating the drop-list with country for example; here my drop-down height is extended like anything because autoDropDownHeight is set to true, instead having a minimum height with scrollbar.

    Like generic drop-down i.e. select, I want the jqxdropdownlist to behave in a similar way,

    1) if less number of list item, it should be auto height.
    2) if more number if list item, it should set to minimum height with scroll bar.

    Code which I used:

    $(".country_select").jqxDropDownList({placeHolder: "Please Select",height:23, theme: theme, enableBrowserBoundsDetection:true, autoDropDownHeight: true });

    Someone please help me.

    I look for your swift response.

    Thanks & Regards,

    DropDownList | Height Issue #23143


    Hello rssb,

    Here is an example:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <div id='content'>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = getDemoTheme();
    var source = [
    "Café Bombón",
    "Café au lait",
    "Caffé Corretto",
    "Café Crema",
    "Caffé Latte",
    "Caffé macchiato",
    "Café mélange",
    "Coffee milk",
    "Cafe mocha",
    "Cuban espresso",
    "The Flat White",
    "Greek frappé coffee",
    "Iced Coffee",
    "Indian filter coffee",
    "Instant coffee",
    "Irish coffee",
    "Liqueur coffee"
    var number = source.length;
    var auto;
    if (number > 10) {
    auto = false;
    } else {
    auto = true;
    // Create a jqxDropDownList
    $("#jqxWidget").jqxDropDownList({ source: source, selectedIndex: 1, width: '200', height: '25', theme: theme, dropDownHeight: 100, autoDropDownHeight: auto });
    <div id='jqxWidget'>

    Best Regards,

    jQWidgets team

    DropDownList | Height Issue #23145



    Thanks for the solution. I come-up with the same approach like what you did here.

    But in my case, source for drop-down is not an array. It will come from data base and populated into generic drop-down. From there I load the values in to jqx custom drop-down list.

    Thanks & Cheers,

    DropDownList | Height Issue #100283


    I have the same issue but the source of my drop-down changes several times after the drop-downhas been created, so i need the list to have autoheight accompanied with a max height. How can i do that? i tried but it seems autoheight cannot be changed after it is created.


    DropDownList | Height Issue #100305


    Hi N.I.Alam,

    The following example shows how to achieve your requirement: https://jseditor.io/?key=jqxdropdownlist-autodropdownheight-max-height. We hope it is helpful to you.

    Best Regards,

    jQWidgets team

    DropDownList | Height Issue #100404


    thanks, it works!

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

You must be logged in to reply to this topic.