Problems with plugin in jQuery dialog boxes

Question

First question, why is this style

label, input { display:block; }

reducing the width of the dropdownchecklist drop-down list (the text appears below the checkbox)? The style is needed for other portions of the program so eliminating the style isn't so simple.

Second question: If I use the dropdownchecklist plug-in outside of a jQuery dialog box, it works perfectly. But if it's added to a dialog box, the width is reduced to zero and even if I adjust the width in Firebug, it's not functional (clicking won't produce a drop-down list). The 's9' id was taken from the dropdownchecklist demo code.

 $(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";
            }
        } });

The following code was taken from the dialog demo.

<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>

What do I need to change to make dropdownchecklist work in a dialog box? An ordinary drop down box works just fine but I wanted the check boxes to make it simpler for the user to understand.

This SO question sounds like my problem but it doesn't seem to work for me: jQuery Plugin does not work in a Modal

Thank you.

Björn Björn · Accepted Answer · 2011-06-25T14:18:50

Regarding first question: Block-level elements (such as DIV, P etc, or elements made block-level with display: block) generally start on a new line.

You could use display: inline-block instead, but it has poor support in older IE's (partial support in IE6/7, no support in older versions). A better way would probably be to put each label+input pair in <div>s and use:

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

Regarding your second question, could we see a live example or the jquery code?

Problems with plugin in jQuery dialog boxes

1 Answers