Hello everyone :)

I have a table with some select boxes and one image. The image is surrounded by an anchor, see below, to enable lightbox on it. When I click the image, everything works as it should - except that all select boxes disappear and in the process changes the row height (The default row height is lower than the select box). I've searched the forums, and even the lightbox javascript files for suspicious invocations of .hide() but to no avail.

This is my first issue posting so I'm not sure what other information you need. But just shout and I'll give it to you :)

HTML:

<table>
<tr><td><select id='a'><option value='b'>c</option></select></td></tr>
<tr><td>
<a href='http://www.google.com/images/logos/ps_logo2.png' ref='lightbox'><img src='http://www.google.com/images/logos/ps_logo2.png' /></a>
</td></tr>

Comments

jfd’s picture

jfd commented

This is actually a feature of Lightbox to prevent select boxes and flash movies from showing through the overlay in some browsers. The function responsible for hiding them is called toggleSelectsFlash on line 1045 in lightbox.js:

toggleSelectsFlash()
Hide / unhide select lists and flash objects as they appear above the
lightbox in some browsers.

As this seems to guarantee consistency in appearance across browsers, I wouldn't recommend changing the behavior. If you still want to do it, you can override the function by adding a statement to a javascript file that is embedded after the lightbox.js. Something like this should do the trick:
Lightbox.toggleSelectsFlash = function() {};

jfd’s picture

jfd commented