jQuery UI Widgets Forums Lists DropDownList DropDown Height?

This topic contains 7 replies, has 4 voices, and was last updated by  akansha 11 years, 8 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • DropDown Height? #1316

    rafi
    Participant

    It seems that there’s some default height of the dropdownlist’s popup. What should I do to change it?

    DropDown Height? #1335

    support
    Participant

    Hi rafi,

    To change the popup listbox’s height, you can use the dropDownHeight property.

    Code example:

    $("#jqxdropdownlist").jqxDropDownList({ dropDownHeight: 250 });

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    DropDown Height? #5221

    akansha
    Member

    unnecessary space is visible in dropdownlist after expanding.

    tried properties : $(“#drpDatasource”).jqxDropDownList({ autoDropDownHeight: true });
    and $(“#drpDatasource”).jqxDropDownList({itemHeight: 25});

    but still space issue is not resolved.

    DropDown Height? #5222

    Peter Stoev
    Keymaster

    Hi akansha,

    There could be some CSS conflict with our styles. Could you please post a sample here so when can test and debug it? To format HTML or Script, you need to select it, and press the “Format” button in the Forum’s Toolbar – .

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    DropDown Height? #5280

    akansha
    Member

    The jqxDropDownList represents a widget that contains a list
    of selectable items displayed in a drop-down.

    $(document).ready(function () {
    var theme = getTheme();
    var source = [
    "try1",
    "try2",
    "try3"
    ];
    // Create a jqxDropDownList
    $("#jqxWidget").jqxDropDownList({ source: source, selectedIndex: 1, width: '200', height: '25', theme: theme });
    });

    DropDown Height? #5281

    akansha
    Member
    <code>
    <!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>
    <meta name="keywords" content="jQuery DropDownList, List, ListBox, Popup List, jqxDropDownList, jqxListBox, List Widget, ListBox Widget, DropDownList Widget" />
    <meta name="description" content="The jqxDropDownList represents a widget that contains a list of
    selectable items displayed in a drop-down." />
    <title id='Description'>The jqxDropDownList represents a widget that contains a list
    of selectable items displayed in a drop-down.</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdata.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/jqxmenu.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="scripts/gettheme.js"></script>
    <script src="scripts/CommonScript.js" type="text/javascript"></script>
    <link href="jqwidgets/styles/jqx.energyblue.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id='content'>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = getTheme();
    var source = [
    "try1",
    "try2",
    "try3"
    ];
    // Create a jqxDropDownList
    $("#jqxWidget").jqxDropDownList({ source: source, selectedIndex: 1, width: '200', height: '25', theme: theme });
    });
    </script>
    <div id='jqxWidget'>
    </div>
    </div>
    </body>
    </html>
    </code>
    DropDown Height? #5283

    Peter Stoev
    Keymaster

    Hi akansha,

    If you want the dropdown’s height to be equal to the sum of the items height, then you need to set the DropDownList’s ‘autoDropDownHeight’ to true.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    DropDown Height? #5289

    akansha
    Member

    Thanks!!

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

You must be logged in to reply to this topic.