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

    rskbuvan
    Spectator

    Hi,

    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.

    Requirement:
    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,
    \_rssb

    DropDownList | Height Issue #23143

    Dimitar
    Participant

    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">
    <head>
    <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>
    </head>
    <body>
    <div id='content'>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = getDemoTheme();
    var source = [
    "Affogato",
    "Americano",
    "Bicerin",
    "Breve",
    "Café Bombón",
    "Café au lait",
    "Caffé Corretto",
    "Café Crema",
    "Caffé Latte",
    "Caffé macchiato",
    "Café mélange",
    "Coffee milk",
    "Cafe mocha",
    "Cappuccino",
    "Carajillo",
    "Cortado",
    "Cuban espresso",
    "Espresso",
    "Eiskaffee",
    "The Flat White",
    "Frappuccino",
    "Galao",
    "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 });
    });
    </script>
    <div id='jqxWidget'>
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    DropDownList | Height Issue #23145

    rskbuvan
    Spectator

    Dimitar,

    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,
    \_rssb

    DropDownList | Height Issue #100283

    N.I.Alam
    Participant

    Hi,
    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.

    Thanks

    DropDownList | Height Issue #100305

    Dimitar
    Participant

    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,
    Dimitar

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

    DropDownList | Height Issue #100404

    N.I.Alam
    Participant

    thanks, it works!

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

You must be logged in to reply to this topic.