jQuery UI Widgets Forums Lists ComboBox A bug in ComboBox when used with Expander

This topic contains 2 replies, has 2 voices, and was last updated by  alastairwalker 6 years, 3 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • alastairwalker

    I draw to your attention that there is bug in the ComboBox when used in conjunction with the Expander widget.

    In the Expander settings, if the ‘expanded: false’ setting is used, the down arrow in the ComboBox is not shown.

    If the default setting of ‘expanded:true’ is used, the down arrow in the ComboBox is presented.

    I am using JQwidget version 4.1.2.

    The following code is used. (Note: the ‘libraries’ will probably have to be replaced with ..\..)

    <!DOCTYPE html>
    <html lang="en">
        <meta name="keywords" content="jQuery ComboBox, List, ListBox, Popup List, jqxComboBox, jqxListBox, List Widget, ListBox Widget, DropDownList Widget" /> 
        <meta name="description" content="The jqxComboBox in this demo is populated with items and show
            how to display image next to each item."/>
        <title id='Description'>The jqxComboBox represents a widget that contains a list of
            selectable items displayed in a drop-down. Users can enter information in the text
            box portion and search for a specific item. The widget comes with built-in auto-complete
        <link rel="stylesheet" href="libraries/jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="libraries/jqwidgets/scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="libraries/jqwidgets/scripts/demos.js"></script>
        <script type="text/javascript" src="libraries/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="libraries/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="libraries/jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="libraries/jqwidgets/jqxcombobox.js"></script>
        <script type="text/javascript" src="libraries/jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="libraries/jqwidgets/jqxexpander.js"></script>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {                
                    var source = [{"primaryindex":"3","label":"Chaos","tooltips":""},
    	    		$("#jqxExpander").jqxExpander({width:400,expanded: false});
    	               // Create a jqxComboBox
    	                { 	source: source,
    				itemHeight: 20,
    				dropDownHeight:125 ,
    	                	multiSelect: true,
    	                	displayMember: ''
            <div id='jqxExpander'>
            		<div id='jqxWidget'></div>

    Kind regards,



    Hi alastairwalker,

    If you want to render other jqxWidgets inside of the jqxExpander you need to initialize them in the “initContent” property. Here’s how to do it:

    Best Regards,

    jQWidgets Team


    Thank you – Christopher – I am glad there is a simply remedy!


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

You must be logged in to reply to this topic.