2013-03-06 1 views
0

Я использую jqWidgets вкладку с JQuery Избранного выпадающими внутри содержимого вкладокJQuery Избранная выпадающие внутри вкладки jqWidgets не делает правильно

Проблемы, которую я имею, когда я нажимаю открыть выпадающее ДИВ получает обрезано в нижней части вкладки - Я ожидаю, что всплывающее окно для выпадающего меню для наложения все и отображать полностью

Смотрите следующий простой пример, чтобы воспроизвести поведение:

http://jsfiddle.net/mPwWW/

Как я могу исправить это с минимальным взломом любой из их таблиц стилей?

<html> 
<div style="width : 500px; height : 180px;"> 
<div id="tabs"> 
    <ul> 
     <li>Test</li> 
    </ul> 
    <div> 
     <label>Test:</label> 
     <select id="target" style="width : 80px"></select> 
    </div> 
</div> 
</div> 
</html> 

<script> 
$("#tabs").jqxTabs({ 
     position : 'top', 
     animationType : 'fade', 
     selectionTracker: true, 
     height : '180px' 
    }); 

// the following lines are just for filling the sample dropdown with some values 
var html = ''; 
for (var x = 0; x < 100; x++) { 
    html += '<option value="'+x+'">'+x+'</option>'; 
} 
$("#target").html(html); 
// apply the chosen library to this dropdown 
$("#target").chosen(); 
</script> 

Пожалуйста, смотрите скрипку код, который я не копируют document.ready вызова в моем фрагменте кода выше

ответ

0

Проблема заключается в том, что DIV контейнер, который Избранный раскрывающийся в имеет набор высоты. Поэтому, если Chosen распространяется дальше, чем высота контейнера div, тогда он будет отключен. То, что вы можете попробовать это добавить к Chosen выпадающего списка:

position: absolute 

Таким образом, он будет выведен из нормального потока страницы, другими словами, не ограничивается высотой от его родительского контейнера.

+0

Спасибо за предложение. Я посмотрел на выбранный css, и похоже, что они уже применяют положение: абсолютное к классу «chzn-drop» – Trant

Смежные вопросы