jQuery UI Widgets › Forums › Lists › ComboBox › A bug in ComboBox when used with Expander
Tagged: Angular expander, bootstrap expander, javascript expander, jquery expander, jqwidgets expander, jqxexpander with comboBox
This topic contains 2 replies, has 2 voices, and was last updated by alastairwalker 8 years, 6 months ago.
-
Author
-
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
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,
ChristopherjQWidgets Team
http://www.jqwidgets.comThank you – Christopher – I am glad there is a simply remedy!
Alastair
-
AuthorPosts
You must be logged in to reply to this topic.