Проблемы с плагином в диалоговых окнах jQuery

Question

Первый вопрос, почему этот стиль

label, input { display:block; } 

уменьшить ширину выпадающего списка раскрывающегося списка (текст появляется под флажком)? Стиль необходим для других частей программы, поэтому устранить его не так просто.

Второй вопрос: если я использую плагин dropdownchecklist вне диалогового окна jQuery, он работает отлично. Но если он добавлен в диалоговое окно, ширина уменьшается до нуля, и даже если я отрегулирую ширину в Firebug, это не работает (нажатие не приведет к раскрытию списка). Идентификатор 's9' был взят из демонстрационного кода выпадающего списка.

 $(document).ready(function() {           

        $("#s9").dropdownchecklist( { textFormatFunction: function(options) {
            var selectedOptions = options.filter(":selected");
            var countOfSelected = selectedOptions.size();
            switch(countOfSelected) {
                case 0: return "Nobody";
                case 1: return selectedOptions.text();
                case options.size(): return "Everybody";
                default: return countOfSelected + " People";
            }
        } });   

Следующий код был взят из демонстрационной версии диалога.

<div class="demo">
        <div id="dialog-form" title="Create new user">
            <p class="validateTips">All form fields are required.</p>            
            <form>
            <fieldset>
                <label for="userid">User ID</label>
                <input type="text" name="userid" id="userid" class="text ui-widget-content ui-corner-all" />                   
                <label for="password">Password</label>
                <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
                <label for="email">email</label>
                <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />                                                      
                <label for="locked">Locked</label>
                <input type="checkbox" name="locked" id="locked" value="" >                    
                <select  id="s9" class="s9" multiple="multiple" >
                 <option>Alice</option>
                 <option>Bob</option>
                 <option>Christian</option>
                 <option>Daniel</option>
                </select>                 
          </fieldset>      
         </form>
</div>

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

Этот ТАК вопрос звучит как моя проблема, но, похоже, он не работает для меня: Плагин jQuery не работает в модальном режиме

Спасибо.

Answer 1

Относительно первого вопроса: элементы уровня блока (такие как DIV, P и т. Д. Или элементы уровня блока с display: block) обычно начинаются с новой строки.

Вы можете использовать display: inline-block вместо этого, но он имеет слабую поддержку в старых IE (частичная поддержка в IE6 / 7, в старых версиях не поддерживается). Возможно, лучшим способом было бы поместить каждую пару label + input в <div> s и использовать:

label, input { 
    display:block; 
    float: left;
} 

Что касается вашего второго вопроса, можем ли мы увидеть живой пример или код jquery?