jqTransform Select не работает в Fancybox - PullRequest
Новая
       27

jqTransform Select не работает в Fancybox

1 голос
/ 31 октября 2011

Кажется, что jQTransform не устанавливает должным образом высоту тега UL для SELECT, когда он находится в fancybox.Высота всегда равна 0, что означает, что при нажатии, чтобы открыть ее, параметры не отображаются.Я попытался заставить его установить высоту при открытии, но с этим решением требуется 6-7 щелчков, чтобы заставить его придерживаться (то есть, бесполезно).Кто-нибудь разобрался, как заставить их хорошо работать вместе?Это даже не работает с CSS по умолчанию.Другие элементы формы работают нормально.Только не ВЫБРАТЬ.

У меня есть только пара дней, чтобы уложиться в срок, поэтому любая помощь приветствуется.Ниже приведен очень простой фрагмент кода из двух файлов, которые я использовал для тестирования.

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>

1 Ответ

3 голосов
/ 23 января 2012

У меня нет ответа, но я столкнулся с подобной проблемой. Кажется, проблема в том, что для внешнего элемента установлено значение «display» none, или даже для div «.jqTransformSelectWrapper» установлено значение display: none.

Я понятия не имею, как исправить вывод, но я сузил его до чего-то в том же духе.

Я бы поспорил, что это какая-то ошибка в самом плагине.

EDIT

Я знаю, что это технически не решает проблему, но может, по крайней мере, заставить ее работать ...

Я обнаружил, что если я использую CSS для нацеливания на UL и задаю ему высоту «auto», это, похоже, работает для меня.

просто будет работать: 

.jqTransformSelectWrapper ul {height: auto;}
...