cijic / dropdown-check-list Goto Github PK

When the .ui-dropdownchecklist has been styled with a "margin", the
dropdownlist doesn't display quite right.
I tried it with a 30px left margin, and the dropdown list showed where the
actual div started, not where the visible select box was drawn.

What steps will reproduce the problem?
1. Place normal select box below mulitple select
2. View in IE6
3. Open the select box

What is the expected output? What do you see instead?
Normally, the multiple select box will cover the following normal select,
but in IE6 it doesn't

What version of the product are you using? On what operating system?
Using 0.6

Please provide any additional information below.
Addded z-index for both elements isn't working in IE6

What steps will reproduce the problem?
1. create a dropdownlist with more than 400 items
2. load the page, loading time around 10s
3. reduce to 40 items, loading time now around 1s

What is the expected output? What do you see instead?
Faster loading times on large inputs

What version of the product are you using? On what operating system?
the latest version, Tested it with FireFox 3.5

Please provide any additional information below.
IN WORDS: large lists are very slow.

but clicking on a checkbox does.

with:
        <select id="s2" multiple="multiple">
            <option>Low</option>
            <option selected="selected">Medium</option>
            <option selected="selected">High</option>
        </select>

the 2'nd and 3'rd checkboxes in the drop down should be checked. In IE6 
they are not checked.

What steps will reproduce the problem?
1. Keep tabbing and you will see there is no focus on the dropdown.
2. Suppose (in case), if there is a hidden focus on the control, then the
arrow down does not pull up the dropdown.

What is the expected output? What do you see instead?
1. The keyboard operation should just work as it works for the default
<select> dropdown.

What steps will reproduce the problem?
1. View your Project home page with FireFox
2.
3.

What is the expected output? What do you see instead?

I expected to see styled dropdown lists like you do in IE, but they were not.

What version of the product are you using? On what operating system?

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.10)
Gecko/2009042316 Firefox/3.0.10 (.NET CLR 3.5.30729)

Please provide any additional information below.

Should be possible to test it with http://webkit.org/ on windows

Display a radio button list when the select is in single selection mode.
Now it displays a checkbox list but it doesn't sync ok with the select.

--- ui.dropdownchecklist.js (revision 41)
+++ ui.dropdownchecklist.js (working copy)
@@ -289,7 +289,7 @@
                 }
                 instance.dropWrapper.css({
                     top: instance.controlWrapper.offset().top +
instance.controlWrapper.outerHeight() + "px",
-                    left: instance.controlWrapper.offset().left + "px",
+                    left: instance.controlWrapper.offset().left + "px"
                 })
                var ancestorsZIndexes = controlWrapper.parents().map(
                    function() {

What steps will reproduce the problem?
1. Click on option text or item (not checkbox)

Change event should be fired but is not.

Plugin Version 0.5

What steps will reproduce the problem?
1. create a dropdown check list within an absolute positioned element
2. activate the dropdown

What is the expected output? 
correct positioning

What do you see instead?
incorrect positioning


What version of the product are you using? 
0.8

On what operating system?
OS X Firefox/Safari

Please provide any additional information below.
I've attached a test HTML file as well as my proposed patch for fixing the
problem

just a small issue when trying to compress your file:
dropContainerDiv.css({ float: "" });
should be:
dropContainerDiv.css({ "float": "" });
as float is an incorrect ID in JavaScript. Would be cool if you can change
that for the next version.

ps: great work. love this script

This doesn't work:

$('#container').append(
   $("<select id='foo' multiple='true'/>")
   .append( $("<option value='foo'>foo</option>") )
   .dropdownchecklist()
);

However, this *does* work:

$('#container').append(
   $("<select id='foo' multiple='true'/>")
   .append( $("<option value='foo'>foo</option>") )
);
$('#foo').dropdownchecklist();

What is the expected output? What do you see instead?

No visible elements appear, neither the original select nor the new one.
I found with firebug, that the source 'select' element gets 'display: none'
but the dropdown-checklist-enabled-select doesn't.
The console doesn't show any errors.

What version of the product are you using? On what operating system?

I'm using the latest (0.4) version with jQuery 1.3.2 and jQuery-UI 1.7.1.
My browser is Firefox 3.0.10 under Ubuntu 9.04.

What steps will reproduce the problem?
1. Open demo and scroll to 'Select with groups' section


What is the expected output? What do you see instead?
The text of the ddl should be the concatenated values of the checked items. 
Instead the text is blank.

Thanks a lot for your great work on this plugin!

One small bug (and an easy fix for it):
You explicitly set the height of the text box to avoid wrapping, on line 86, 
with:
            textContainer.css("height", control.height());

However, this will set a zero height in cases where the control is hidden. I 
think a solution might be 
to use this instead (works here):
            textContainer.css("height", "inherit");

In fact, this could probably be done in the CSS file altogether.

Cheers!

What steps will reproduce the problem?
1. Provide option to u need check box or not! I need to use drop down with
check box with down without check box. And so in consistence.
2.
3.

What is the expected output? What do you see instead?

What version of the product are you using? On what operating system?


Please provide any additional information below.
asd

_syncSelect does not fire the onchange event in the sourceSelect.  At the 
very last line I added $(sourceSelect).change(); which forces the onchange 
event to be raised in the sourceSelect anytime the dropdown-check-list items 
change.

What steps will reproduce the problem?
1. Set an option to disabled
2. Checklist allows option to be selected/deselected

What is the expected output? What do you see instead?
Disabled options should be disabled in the dropdown checklist.  Instead,
user is able to make selections on disabled options.

What version of the product are you using? On what operating system?
0.7
Firefox 3.5, IE 8

Please provide any additional information below.

First issue : 

<select>
<option>All</option>
<optgroup label="Group">"
<option>opt 1</option>
<option>oopt 2</option>
</optgroup>
</select>

with firstItemChecksAll behaves weird :
when you click on "opt1", it will behave as if you had clicked "All"


Second Issue : option "All" is at the end of the list instead of being at
the beginning

Possible Enhancement : could we have an option "firstItemChecksAll" for
each group ? to allow such selects : 

<select>
<optgroup label="Group1">"
<option>All group 1</option>
<option>opt 1</option>
<option>oopt 2</option>
</optgroup>
<optgroup label="Group2">"
<option>All group 2</option>
<option>opt 1</option>
<option>oopt 2</option>
</optgroup>
</select>

Here is a function for unchecking all the items in the dropdown checklist.

uncheckall: function() {

            var self = this, options = this.options, sourceSelect =
this.sourceSelect, controlWrapper = this.controlWrapper, dropWrapper =
this.dropWrapper;
            var allCheckboxes = dropWrapper.find("input");
            var selectOptions = sourceSelect.get(0).options;
            allCheckboxes.each(function(index) {
                alert(index);
                $(this).attr("checked", false);
                alert($(this).attr("checked"));
                $(selectOptions[index]).attr("selected", false);
            });
            self._updateControlText();
        }

What steps will reproduce the problem?
1. edit demo.html (see bottom of this message)
2. uncheck all items of #s1
3. click "value of s1" link. => nil
4. click "select Low" link.  => added "Low"
5. click "value of s1" link. => hidden <select> has item "Low".
6. but UI is not updated.

What is the expected output? What do you see instead?
I want to updated UI. 
"Low" checkbox is selected, and text change.

What version of the product are you using? On what operating system?
todays trunk.
OSX10.4
Firefox3

Please provide any additional information below.

please edit demo.html
    <p>
        <select id="s1" multiple="multiple">
            <option>Low</option>
            <option>Medium</option>
            <option>High</option>
        </select>
    </p>
<!-- from here -->
    <a href="#" onclick="$('#s1').val([''])">select none</a>
    <a href="#" onclick="$('#s1').val(['Low',])">select Low</a>
    <a href="#" onclick="$('#s1').val(['Low','Medium'])">select Low,Medium</a>
    <a href="#" onclick="alert($('#s1').val())">value of s1</a>
<!-- END -->

You should give a minified version of your script, along with the original 
one.

What steps will reproduce the problem?
1. Create a form with simplemodal plugin (or on a div with z-index > 500)
2. Click drop-down
3. Drop-down is not visible.

What is the expected output? What do you see instead?
I expect to see the dropdown checklist, but it is hidden.

What version of the product are you using? On what operating system?
0.7, Firefox 3.5, IE 8, Windows XP

Please provide any additional information below.
Patch is supplied.  Patch computes maximum z-index of parent containers and
adds 1 to ensure the dropdown list is visible above the parent containers.

What steps will reproduce the problem?
1. Open dd list
2. Hover with mouse over items

What is the expected output? What do you see instead?
The items should invert background color and fore color 

When I use the control inside a Panel displayed with ModalPopupExtender 
this control does not work. The dropdownlist does not contain any values 
and nothing happens when clicking.
When I move it outside it works.

I use version 0.7 and (Windows asp.net 3.5)

<div class="ui-dropdownchecklist-dropcontainer-wrapper" style="position:
absolute; top: -3300px; width: 0px; height: 0px; left: -3300px;">
<div class="ui-dropdownchecklist-dropcontainer" style="overflow-y: auto;
height: 0px;">

On click:
<div class="ui-dropdownchecklist-dropcontainer-wrapper" style="position:
absolute; top: 130.533px; width: 0px; height: 0px; left: 32.8167px;">

So as you can see the height and width are not being set right. If it edit
it in firebug, it will display correctly. Also the z-index is not being set
right.

The jQuery tab is being gen'ed by ajax, and I have:
    $(document).ready(function() {
        $("#s3").dropdownchecklist({ width: 100 });
    });
At the bottom.

Doing a bit more testing im seeing that the tab isnt even fully
loaded/rendered yet(displayed to user), and the _setSize is being triggered. 
So.. hackish trick..
setTimeout("$('#s3').dropdownchecklist({ width: 100 }) ", 500);

Via html it is possible to use img-Tag or other html tags within option 
fields. DDCL is whipping this out and initializing its own empty option 
field, while only using the given value...is it possible to use html-tags 
within option fields? i can not find the place where you filter out all 
html or other stuff :(

thank you
timo

What steps will reproduce the problem?
1. Attempt to use the dropdowncheckbox in an iframe.

What is the expected output? What do you see instead?
It should work.  Instead, it is creating the control, but not populating.

This is just GREAT plugin, but there is one problem. It can't dynamically 
update options list, if they are changed in the parent "select" element.

--- What steps will reproduce the problem? ---
1. Create dropdown-check-list from "select" element (for example, 
id="select1")
2. Change/Add/Remove some values in "select1" list using javascript 
(JQuery)
3. dropdown-check-list remains the same

Your plugin is extremely important for my web application! There was also 
a problem with "onchange" event - it didn't execute when the checkbox in 
dropdown-check-list checked or unchecked. This problem i've solved by 
adding the line "$(sourceSelect).change();" in the end of _syncSelected 
function. But there is no way i can solve the discribed problem! I've 
tried to destroy dropdown-check-list, connected with "select1", but it 
doesn't initialize again... Maybe i just don't know, how to re-initialize 
dropdown-check-list properly? I would be very grateful if you'll help me 
to solve this problem!

P.S. and sorry fom my English - it's not my native language. =)

The change event doesn't get fired after the
ui-dropdownchecklist-dropcontainer-wrapper element dissapears

What is the expected output? What do you see instead?
The select's change event should fire after you have changed your selection

I also have a solution for your!
You need to add the following line of code to _toggleDropContainer:
function() ... in the hide function

**********       instance.sourceSelect.trigger("change");    *********

Finally it should look something like:

            var hide = function() {
                var instance = $.ui.dropdownchecklist.drop;
                if (null != instance) {
                    instance.dropWrapper.css({
                        top: "-3300px",
                        left: "-3300px"
                    });

instance.controlWrapper.find(".ui-dropdownchecklist").toggleClass("ui-dropdownch
ecklist-active");
                    instance.dropWrapper.drop = false;
                    $.ui.dropdownchecklist.drop = null;
                    $(document).unbind("click", hide);

                    instance.sourceSelect.trigger("change");
                }
            }

Many things to suggest:

1) I'd use:
margin-right: 17px;
in ui-dropdownchecklist-text
instead of padding in .ui-dropdownchecklist

2) to avoid FF issue on scroll on the list. I changed the _createDropItem
to do this:
item.hover(function() {
    item.parents(".ui-dropdownchecklist-dropcontainer:first").children().removeClass("ui-dropdownchecklist-item-hover");
    item.addClass("ui-dropdownchecklist-item-hover");
            }, function() {
    item.removeClass("ui-dropdownchecklist-item-hover");
            });

3) the width is not calculated property in IE 6 y 7 for the drop down list.
I had to do this temporaly:
var dropWidth = this.options.width + (($.browser.msie)?-21:19);         


Keep going, great plugin.
Gonzalo Escribano

What steps will reproduce the problem?
1. Open the demo.html file in the browser
2. Simultaneously open the same file in a text editor and change High (of
id="s2") to "High very long" (without quotes)
3. Save the file
4. Refresh the page and the newly changed item is not 'selected' even
though the mark-up specifies it as selected. 

This is important because I was dynamically setting the select boxes and it
does not seem to be refreshing properly... (the above steps are just a
proxy for this process)

What is the expected output? What do you see instead?
   "High very long" item should be selected but it is not. 

What version of the product are you using? On what operating system?
    Firefox 3.0.8 (64 bit) on Ubuntu 8.04 (64 bit)

Please provide any additional information below.
    Have not tested this on Windows and other alternatives. 

I have modified dropdown control to support OPTGROUP (1 level)

Regards,

Emanuel

Split from #23

Possible Enhancement : could we have an option "firstItemChecksAll" for
each group ? to allow such selects : 

<select>
<optgroup label="Group1">"
<option>All group 1</option>
<option>opt 1</option>
<option>oopt 2</option>
</optgroup>
<optgroup label="Group2">"
<option>All group 2</option>
<option>opt 1</option>
<option>oopt 2</option>
</optgroup>
</select>

couldn't use it.

I read Emanuel's suggestion on supporting OPTGROUP.

I’ve just downloaded 0.8 version and it would be more than perfect if your 
plug-in supports OPTGROUP.

Do you have any plan on emerging this feature?

        updateSelection: function(){ 
            this._updateControlText();
            var dropWrapper = this.dropWrapper;
            this.sourceSelect.find("option").each(function(i){
                var chk = dropWrapper.find(".ui-dropdownchecklist-dropcontainer
div.ui-dropdownchecklist-item input[type=checkbox]:eq("+i+")");
                chk.attr("checked", $(this).attr("selected") );
            });
        },

When using Firefox 1.5, 2.0 with Gecko 1.8, dropdown-check-list won't work
as the select box is just as width as their border when no item is
selected. This is because Gecko 1.8 doesn't support display:inline-block.

Solving this issue isn't that comfortable, but a quick workaround is adding
the following lines to your CSS file:

.ui-dropdownchecklist, x:-moz-any-link
{
    display: -moz-inline-block;
    width: 100px;
    display: block;
    overflow: hidden;
}

.ui-dropdownchecklist, x:-moz-any-link, x:default
{
    display: inline-block;
    width: auto;
}

This sets a default width of 100px to your outer select box and will be
appended to _any_ of the dropdown-check-lists on the page. To solve this,
open the js class and search for 

    controlWrapper.find(".ui-dropdownchecklist-text").css({
                width: controlWidth + "px"
            });

After, add:

    controlWrapper.find(".ui-dropdownchecklist").css({
                width: (controlWidth+18) + "px"
            });

Firefox 1.5 and 2.0 works quite well with that. The +18 is for the dropdown
icon that is otherwise overlayed by text.

Please check if i missed something, but it looks like this works fine in
FF1.5+ IE6+ Opera9+ Safari4.

I have a question.

How to add a new item in dropdown using javascript code?

Thanks.

I need to use dropdownchecklists style replacement to ALL my 
dropdowns...including those without multiple checkbox choice. Is that 
possible? So we can achieve more design consistency and re-use the 
possibility to have own hover images.

thank you
timo

What steps will reproduce the problem?

Check options and move mouse away from the drop down.  It stays open until
you click something else (onblur).

I want the dropdown to close after Im done selecting options and I dont
want to click the mouse for it to close.

Would it be possible to add mouseout or mouseleave event for this
functionality?

Regards
kristin

Opera 9.0: max-height isn't accepted and therefore scrolling doesn't work. 
--> When clicked, Background box is shown with the expected height, but any
elements that exceed this height are shown below. Looks like overflow
doesn't work.

Opera 8.0, 8.5: additionally, max-width doesn't work.
--> Element with horizontal scrolling is shown correctly, but once it is
clicked, it's width will adjust to those of the longest option element.
Once elements are selected, their content will be cut off after the
max-width while the box has the extended width. The dropdown box itself
works fine.

What steps will reproduce the problem?
1. Use the dropdown-check-list within a form
2. Check a couple of boxes
2. Submit the form

What is the expected output? What do you see instead?
I would expect to get a comma separated list of the titles, or the values
from the selected items (I prefer the values). I get the last selected item
instead.

Thanks

There is no blur event on the select box, I need to trigger something when
Im done selecting from the multiselect!

What steps will reproduce the problem?
1. create a dropdown check list
2. programmatically set the value of the original select element and fire a
change event.

What is the expected output? 
the dropdown check list should update it's checked items

What do you see instead?
old select is retained when a call to .val() on the source select will
return what was programatically set.


What version of the product are you using? 
0.8

Please provide any additional information below.
attached a test HTML file and a proposed patch

[deleted issue]

What steps will reproduce the problem?
1. Develop a Sharepoint web part in Visual Studio and deploy
2. .js, .css and .png files copied to static location (e.g. _layouts)
3. Add web part to blank page

What is the expected output? What do you see instead?

Simple dropdownchecklist expected but "Internet Explorer cannot open the 
Internet site http://localhost/page.aspx.
Operation aborted" error dialog pops up instead.

What version of the product are you using? On what operating system?

dropdownchecklist 0.6 
Windows Server R2 Service Pack 2
MOSS 2007
IE 6

Please provide any additional information below.

1/. JQuery runs fine under Sharpoint - below example has simple background 
colour change commented out.

2/. Is it a IE6 issue?  Demo dropdownchecklist page runs fine?

3/. Simplified code example:

    public class FilteredListView : 
System.Web.UI.WebControls.WebParts.WebPart
    {
        public FilteredListView()
        {
        }

        public override void RenderControl(HtmlTextWriter output)
        {
            output.Write("<link rel=\"stylesheet\" type=\"text/css\" 
href=\"http://localhost/_layouts/ui.dropdownchecklist.css\" />");
            output.Write("<script type=\"text/javascript\" 
src=\"http://localhost/_layouts/jquery-1.2.6.min.js\"></script>");
            output.Write("<script type=\"text/javascript\" 
src=\"http://localhost/_layouts/ui.core.js\"></script>");
            output.Write("<script type=\"text/javascript\" 
src=\"http://localhost/_layouts/ui.dropdownchecklist.js\"></script>");

            //output.Write("<script 
type=\"text/javascript\">$(\":text\").css(\"background-color\", 
\"yellow\");</script>");

        output.Write("<select id=\"s1\" multiple=\"multiple\">");
            output.Write("<option>Low</option>");
            output.Write("<option>Medium</option>");
            output.Write("<option>High</option>");
            output.Write("</select>");
        output.Write("<script type=\"text/javascript\">$(\"#s1
\").dropdownchecklist();</script>");

            EnsureChildControls();
            RenderChildren(output);
        }
    }

What steps will reproduce the problem?
1. Load a page via Ajax in a div
2. Load the content via javascript into a div which includes the dropdown
3. Fire the function

What is the expected output? What do you see instead?
Expected was to see the dropdown fully functional.
What i see is: 
1. the dropdown that works
2. No values are saved within it.
3. the value rules are not the full width they should be

What version of the product are you using? On what operating system?
I'm using the newest jquery and jquery-ui.
Browsers: FF3, IE8, Chrome.

Please provide any additional information below.
I'm aware it's a very rare situation, but i think it should work.

If needed i can give you a link to the live version.

_What steps will reproduce the problem?_
1. Set some properties to _.ui-dropdownchecklist-item-hover_ class
2. Run the widget in Firefox v3.x

_What is the expected output? What do you see instead?_
Firefox v3.x does not respect any attribute set in this class.

To overcome this I've added _.ui-dropdownchecklist-item:hover_ class where
I could at least set a background color, but still no results with text
color. I've tried to override some values directly in the JS code but with
no results either.

The bug is clearly seen on the very first page with the demo
(http://dropdown-check-list.googlecode.com/svn/trunk/demo.html). Just run
it in FF and it becomes clear that _.ui-dropdownchecklist-item-hover_
doesn;t work.

Combining _.ui-dropdownchecklist-item-hover_ with
_.ui-dropdownchecklist-item:hover_ and IE hover hack all other browsers
respect one or the other producing the same visual: IE7/8, Opera 9.64,
Safari 3.2.2, Google Chrome 2.0.x, Maxthon 2.5.1, Avant 11.7.

Since even GRE-based Safari is doing well, I'd say it has something to do
with the browser detect. I could see to the bug myself if I have time
(which I doubt).