Combobox in Popover issue

[DuncanParticipant]

Hi,

I am trying to create a form which includes a combobox on a Popover widget, however the combobox list items are not appearing. I am not sure why this is happening, but I suspect it may be a z-index issue when the listbox portion of the combobox is created.

var options = new Array(“Option 1”, “Option 2”, “Option 3”);

$(“#button”).jqxButton({ theme: ‘light’, template: “inverse” });
$(“#popover”).jqxPopover({theme: ‘light’, height: 200, offset: {left: 0, top:0}, arrowOffsetValue: 50,
title: “Options”, position: ‘bottom’, showCloseButton: true, selector: $(“#button”) });
$(“#header”).addClass(‘jqx-widget-header’);
$(“#jqxComboBox”).jqxComboBox({theme: ‘light’, source: options, width: 200, height: 30});

<div id=”popover” style=”height: 200″>
<div id=”jqxComboBox”></div>
</div>

Any ideas on how to solve this ?

[MartinParticipant]

Hello Duncan,

Yes, you are right. It is a z-index issue.
You can fix it by adding the following css:

.jqx-listbox.jqx-widget-content  {
     z-index: 9999 !important;
 }

Here is an Example.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts