jQWidgets Forums

Tagged: autoDropDownHeight, DropDownList, jqxDropDownList

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

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

Author

DropDownList | Height Issue Posts

June 14, 2013 at 5:01 am DropDownList | Height Issue #23130

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

June 14, 2013 at 6:36 am 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/

June 14, 2013 at 7:31 am 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

May 18, 2018 at 6:26 pm 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

May 23, 2018 at 8:07 am 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/

May 31, 2018 at 8:35 pm DropDownList | Height Issue #100404

N.I.Alam

Participant

thanks, it works!

Author

Posts

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

You must be logged in to reply to this topic.