DropDown Height? - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: DropDownList, dropdownlist plugin, javascript dropdownlist

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

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

Author

DropDown Height? Posts

December 5, 2011 at 6:05 am 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?

December 6, 2011 at 8:09 pm 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

June 22, 2012 at 8:44 am 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.

June 22, 2012 at 8:51 am 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

June 25, 2012 at 4:20 am 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 });

            });

June 25, 2012 at 4:20 am 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>

June 25, 2012 at 4:33 am 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

June 25, 2012 at 5:13 am DropDown Height? #5289

akansha

Member

Thanks!!

Author

Posts

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

You must be logged in to reply to this topic.