It seems like jQTransform doesn't set the height of UL tag for SELECT properly when it's in a fancybox. The height is always 0, which means when you click to open it, the options are not visible. I have tried forcing it to set the height on open, but with that solution, it takes 6-7 clicks to make it stick (i.e. no good). Has anyone figured out how to make them work well together? It doesn't even work with default CSS. Other form elements seem to be working fine. Just not SELECT.
I have only a couple days to hit the deadline so any help is appreciated. Below is a very simple code snippets from the 2 files I was using to test.
host.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="includes/shared/js/jquery-latest.js" type="text/javascript"></script>
<link rel="stylesheet" href="includes/shared/js/jqtransformplugin/jqtransform.css" type="text/css" media="all" />
<link rel="stylesheet" href="includes/shared/js/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="includes/shared/js/jqtransformplugin/jquery.jqtransform.js" ></script>
<script type="text/javascript" src="includes/shared/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
</head>
<body>
<a class="fancybox" href="lightbox.html">Test</a>
<script type="text/javascript">
$('.fancybox').fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 200,
'speedOut' : 200,
'overlayColor' : '#000',
'overlayShow' : true
});
</script>
</body>
</html>
lightbox.html
<div id="box" style="min-height: 400px;">
<form id="book_event_form2" method="POST">
<select name="childTickets" class="childTickets" style="width: 50px;">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</form>
</div>
<script type="text/javascript">
jQuery('#book_event_form2').jqTransform();
</script>
I don't have an answer, but I have run into a similar issue. The issue seems to be when the outer element is set to "display" none, or even the div of ".jqTransformSelectWrapper" is set to display: none.
I have no idea how to fix the output, but I've narrowed it down to something along those lines.
I would be willing to bet this is some kind of bug within the plugin itself.
EDIT
I know this technically doesn't FIX the problem, but it can at least get it working...
I've found that if I use CSS to target the UL and give it a height of "auto" it seems to work for me.
simply will work: