Search code examples
javascriptformsshadowbox

Shadowbox.js hides my select inputs

I'm sure I can't be the first person to have this problem, but I haven't had any luck finding the solution.

I'm using Shadowbox in its simplest form; just doing an image popup with a link like

Click <a href="myimage.png" rel="shadowbox">here</a> to view the image.

This works fine, but has one very odd side effect: When I click the link, all of the select inputs (i.e. drop-down boxes) of the form on my page disappear. A little snooping with Firebug reveals that the CSS is being modified to give the <select> tags the property visibility: hidden. When the image is dismissed, the inputs reappear.

Not surprisingly, this happens consistently across browsers.

Since the inputs all reappear, I could probably just leave things as they are. However, if (for example) the image can't be loaded, and the script can't display it, the inputs stay invisible. Also, it looks strange and it's driving me batty. :D

Other factors that may or may not be relevant:

  • I have done very little with Shadowbox in the past and could very well be missing something embarrassingly obvious.
  • My page and its form are generated by CakePHP.
  • The page uses jQuery, and Shadowbox is using the jQuery adapter.
  • The vanishing inputs do not have class attributes. They do have id attributes that are generated by CakePHP, but these names are very specific to my application and very unlikely to cause any CSS collisions.
  • As far as I can tell, all of the select inputs vanish, and no other element, input or otherwise, on the page is affected at all. (Even the labels associated with the inputs are unaffected.)
  • Versions: Shadowbox 3.0.3, jQuery 1.4.2, CakePHP 1.3
Solution

  • This is a semi-bug in shadowbox, most likely. The select tags are being hidden because in some versions of IE, they are rendered using windows native controls, and thus always appear "above" any other element with a z-index. This obviously is a problem for ShadowBox, so the solution is to hide them while showing the box. Shadowbox should clearly do this only for troublesome browsers, but I think they're taking a more generic approach of always hiding them.