DDCL sized improperly if parent element is not visible

[GoogleCodeExporter]

Hello :)

if dropdown checklist is sent to client in display:none element and only on 
page this element is showed, then pressing on dropdownchecklist it shows only 
2px x 2px drop list. So on every click on dropdownchecklist we need to 
recalculate dropdownchecklist width and height.

Solution is something like this :

var b = f.dropWrapper.find(".ui-dropdownchecklist-dropcontainer");
var maxW = 0;
var maxH = 0;
b.children().each(function (j) {
    var k = a(this);
    maxW = maxW < k.width() ? k.width() : maxW;
    maxH = maxH + k.height();
});
f._setSize({
    width: maxW+5, // for scrolls not to appear 
    height: maxH+5 // for scrolls not to appear
});

As i worked with min version, you need to put this code into 
_toggleDropContainer function. Hope this helps :)

        _toggleDropContainer: function (e) {
            var c = this;
            var d = function (f) {
                if ((f != null) && f.dropWrapper.isOpen) {
                    f.dropWrapper.isOpen = false;
                    a.ui.dropdownchecklist.gLastOpened = null;
                    var h = f.options;
                    f.dropWrapper.css({
                        top: "-33000px",
                        left: "-33000px"
                    });
                    var g = f.controlSelector;
                    g.removeClass("ui-state-active");
                    g.removeClass("ui-state-hover");
                    var j = f.controlWrapper.find(".ui-icon");
                    if (j.length > 0) {
                        j.removeClass((h.icon.toClose != null) ? h.icon.toClose : "ui-icon-triangle-1-s");
                        j.addClass((h.icon.toOpen != null) ? h.icon.toOpen : "ui-icon-triangle-1-e")
                    }
                    a(document).unbind("click", d);
                    f.dropWrapper.find("input.active").attr("disabled", "disabled");
                    if (a.isFunction(h.onComplete)) {
                        try {
                            h.onComplete.call(f, f.sourceSelect.get(0))
                        } catch (i) {
                            alert("callback failed: " + i)
                        }
                    }
                }
            };
            var b = function (f) {
                if (!f.dropWrapper.isOpen) {
                    f.dropWrapper.isOpen = true;
                    a.ui.dropdownchecklist.gLastOpened = f;

                    var b = f.dropWrapper.find(".ui-dropdownchecklist-dropcontainer");
                    var maxW = 0;
                    var maxH = 0;
                    b.children().each(function (j) {
                        var k = a(this);
                        maxW = maxW < k.width() ? k.width() : maxW;
                        maxH = maxH + k.height();
                    });
                    f._setSize({
                        width: maxW+5,
                        height: maxH+5
                    });

                    var i = f.options;
                    if ((i.positionHow == null) || (i.positionHow == "absolute")) {
                        f.dropWrapper.css({
                            position: "absolute",
                            top: f.controlWrapper.position().top + f.controlWrapper.outerHeight() + "px",
                            left: f.controlWrapper.position().left + "px"
                        })
                    } else {
                        if (i.positionHow == "relative") {
                            f.dropWrapper.css({
                                position: "relative",
                                top: "0px",
                                left: "0px"
                            })
                        }
                    }
                    var m = f.controlWrapper.parents().map(function () {
                        var n = a(this).css("z-index");
                        return isNaN(n) ? 0 : n
                    }).get();
                    var h = Math.max.apply(Math, m);
                    if (h > 0) {
                        f.dropWrapper.css({
                            zIndex: (h + 1)
                        })
                    }
                    var g = f.controlSelector;
                    g.addClass("ui-state-active");
                    g.removeClass("ui-state-hover");
                    var j = f.controlWrapper.find(".ui-icon");
                    if (j.length > 0) {
                        j.removeClass((i.icon.toOpen != null) ? i.icon.toOpen : "ui-icon-triangle-1-e");
                        j.addClass((i.icon.toClose != null) ? i.icon.toClose : "ui-icon-triangle-1-s")
                    }
                    a(document).bind("click", function (n) {
                        d(f)
                    });
                    var l = f.dropWrapper.find("input.active");
                    l.removeAttr("disabled");
                    var k = l.get(0);
                    if (k != null) {
                        k.focus()
                    }
                }
            };
            if (e) {
                d(a.ui.dropdownchecklist.gLastOpened);
                b(c)
            } else {
                d(c)
            }
        },

Original issue reported on code.google.com by sani...@gmail.com on 10 Feb 2011 at 11:59

[GoogleCodeExporter]

It is known design limitation that ddcl will not size properly if applied to a 
hidden element.  The current work-around is to only apply the ddcl process once 
the element is made visible.
Fixing when the size calculation is done is on the long-term wish list.

Original comment by womohun...@ittrium.com on 18 Feb 2011 at 2:35

• Changed state: Accepted
• Added labels: Type-Enhancement
• Removed labels: Type-Defect

[GoogleCodeExporter]

Issue 160 has been merged into this issue.

Original comment by womohun...@ittrium.com on 13 Apr 2011 at 5:52

[GoogleCodeExporter]

Simple change of issue title to better describe the request

Original comment by womohun...@ittrium.com on 13 Apr 2011 at 5:54

• Changed title: DDCL sized improperly if parent element is not visible

[GoogleCodeExporter]

Issue 191 has been merged into this issue.

Original comment by womohun...@ittrium.com on 22 Jun 2011 at 7:52

[GoogleCodeExporter]

Issue 206 has been merged into this issue.

Original comment by womohun...@ittrium.com on 26 Aug 2011 at 2:11

[GoogleCodeExporter]

Issue 211 has been merged into this issue.

Original comment by womohun...@ittrium.com on 17 Oct 2011 at 2:32

[GoogleCodeExporter]

Sani...'s patch works great. Thanks for that!

Original comment by mail.at....@gmail.com on 11 Jan 2012 at 1:31

[GoogleCodeExporter]

Is there more of a concrete example/more detailed explanation of this solution? 
I'm a bit lost on where and what exactly do I put into the JavaScript and what 
to change to fit specific cases.

Original comment by congch...@gmail.com on 23 Jan 2012 at 12:52

[GoogleCodeExporter]

The TEST page has an example of DDCL with a hidden parent element.  It shows 
two configurations, one that works and one that doesn't.

Original comment by womohun...@ittrium.com on 23 Jan 2012 at 3:33

[GoogleCodeExporter]

Issue 235 has been merged into this issue.

Original comment by womohun...@ittrium.com on 17 Feb 2012 at 2:45

[GoogleCodeExporter]

Issue 242 has been merged into this issue.

Original comment by womohun...@ittrium.com on 18 Jun 2012 at 4:39

[GoogleCodeExporter]

well I have post solution for this problem

Original comment by drakce.d...@gmail.com on 18 Jun 2012 at 5:58

[GoogleCodeExporter]

Issue 265 has been merged into this issue.

Original comment by womohun...@ittrium.com on 28 Aug 2012 at 5:26

[GoogleCodeExporter]

Thanks for the patch, but I had to change to line

  maxH = maxH + k.height();

to

  maxH = maxH + k.outerHeight(true);

in order to reflect padding/margin of the elements.

Original comment by crusa...@googlemail.com on 3 Nov 2012 at 3:04