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
    Participant

    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">
    <head>
        <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
            support.</title>
        <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>
        </head>
    <body>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {                
                    var source = [{"primaryindex":"3","label":"Chaos","tooltips":""},
    						{"primaryindex":"2","label":"Complex","tooltips":""},
    						{"primaryindex":"1","label":"Complicated","tooltips":""},
    						{"primaryindex":"0","label":"Simple","tooltips":""},
    						{"primaryindex":"-1","label":"Unrated","tooltips":""}];
    
    	    		$("#jqxExpander").jqxExpander({width:400,expanded: false});
    
    	               // Create a jqxComboBox
    	               $("#jqxWidget").jqxComboBox(
    	                { 	source: source,
    	                	theme:'classic',
    				height:25,
    			        width:200,
    				itemHeight: 20,
    				dropDownHeight:125 ,
    	                	multiSelect: true,
    	                	displayMember: ''
    	                });
    
                });
            </script>
            <div id='jqxExpander'>
    	    	<div>Heading</div>
    	        <div>
            		<div id='jqxWidget'></div>
            	</div>
    	    </div>
        </div>
    </body>
    </html>
    

    Kind regards,

    Alastair


    Christopher
    Participant

    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:
    http://jsfiddle.net/4vanz/37/

    Best Regards,
    Christopher

    jQWidgets Team
    http://www.jqwidgets.com


    alastairwalker
    Participant

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

    Alastair

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

You must be logged in to reply to this topic.