Start Building Professional
Web Apps Today

Using combobox with lightbox

I am having problems getting combobox to work in a lightbox. When I click on the down arrow image or the down arrow key. It does not do anything.

The same exact code works outside the lightbox. I'm using a rails environment with the redbox plugin...if that helps.

Any ideas?

The issue can be caused by some absolute-positioned element that covers combo (that is above combo). So, combo events aren't called in this case.

Thanks for the prompt response,

Moving things around in the lightbox...brought back the arrow, but another problem still existed.  The select list was showing up behind the light box.

I tried adding a z-index style attribute to the select element but to no avail.

DIDN'T WORK
<select style='width:200px;z-index:30002' id="combo_zone_200" name="role_list_combo_test">
  <option value="1">a00</option>
  <option value="2">c01</option>

So I fired up firebug and found the errant list's class..  then overrode it as follows:


<style>
.dhx_combo_list {
  background-color:white;
  border:1px solid black;
  font-family:Arial;
  font-size:9pt;
  height:100px;
  overflow-x:hidden;
  overflow-y:auto;
  position:absolute;
  z-index:30002;
  }
</style>

This is not the most elegant solution as the chosen z-index value may not work for all situations.  Seems like there would be a way for the control to set it's z-index automatically to its ancenstor's z-index + 1.   

Thanks,
Ray Trask

Hello,

unfortunately, there is not built-in functionality that sets z-index automatically.

The object of the list can be got by DOMlist property. You can set the necessary z-index for it:

combo.DOMlist.style.zIndex = value;