DatePicker + StickyWin

[Philip Thompson]

Hi all.

I have a stickywin that has a picker picker in it. When I click to open the datepicker, the calendar shows behind the stickywin. This is new as of recently when I updated my libraries to MooTools 1.2.4 and Clientcide 2.2.0. Has anyone else run into this issue?

In the positionClose() method in DatePicker, I've thrown in some debug statements to see what z-indexes I'm getting:

datePickerSW StickyWinInstance SWclearfix: 10000
closeButton closeSticky: 10002
calendarHolder: auto

Thanks,
~Philip

[Philip Thompson]

I've made a little progress in figuring out what's going on, but I've run into another issue. First, the zIndexBase for StickyWin.ModalWM is being set to 11000 while the datePickerSW z-index is only 10000. I can get around this by setting the default zIndex in stickyWinOptions for the DatePicker to something higher than 11000 - I chose 12000. This now allows the DatePicker to show above the StickyWin.

The new issue is that if I click on the DatePicker, it gets moved behind the StickyWin and no date is selected. So, then I cannot select a date and the DatePicker remains open after I close the StickyWin. Why is this moving behind the StickyWIn? I've printed out some more z-indexes to see what's going on...

(class) (id): z-index
(mask) (mask-1259962284777): 10000
(StickyWinInstance SWclearfix) (thePrettyNote): 11000
(mask) (mask-1259962284782): 10000
(datePickerSW StickyWinInstance SWclearfix) (StickyWin_1259962284808): 12000
(datePickerSW StickyWinInstance SWclearfix) (StickyWin_1259962284843): 12000
(datePickerSW StickyWinInstance SWclearfix) (StickyWin_1259962288541): 12000
(closeButton closeSticky) (null): 12002

Here you can see I have 3 date pickers on the page at this point. This actually doesn't provide much useful information, but I can verify the items are on the appropriate level.

Thanks,
~Philip

[Aaron Newton]

is there any way I can see a demo of this in action? Can you make a mooshell that demonstrates this (and nothing else)? it would make it way easier for me to spend time on it.

--

You received this message because you are subscribed to the Google Groups "Clientcide" group.
To post to this group, send email to clien...@googlegroups.com.
To unsubscribe from this group, send email to clientside+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/clientside?hl=en.

[Philip Thompson]

I'll see what I can do. In the meantime, is there a way to pull all the events assigned to an element?

[Aaron Newton]

in a way. myElement.$events (I think; look at Element.Events.js if I'm wrong) is an object with all of the events keyed on the event type.

--

[Philip Thompson]

Ok, I think I'm getting closer to figuring out what's happening. In StickyWin.Stacker, a mousedown event is being added. Well, when the DatePicker is opened up (which I set to have a z-index of 12000), it appears above the StickyWin (z-index of 11000). However, since the mousedown event is being added to the DatePicker (since it's a SW), it's z-index is getting set to 9000 (the default), which is shoving it behind the original StickyWIn (z-index of 11000).

What is the point of the StickyWin.Stacker? I can modify the focus() method and it seems to fix my issue. I use the max z-index between the default (9000) and the current z-index (12000):

<code>

StickyWin.Stacker.implement({

    focus: function(instance){

        if (this.focused == instance) return;

        this.focused = instance;

        if (instance) this.instances.erase(instance).push(instance);

        this.instances.each(function(current, i){

            // Grab the current z-index of the SW

            var currentZindex = $(current).getStyle('z-index').toInt();

            var newZindex = this.options.zIndexBase;

            // If the current is greater than the default, use it

            if (this.options.zIndexBase < currentZindex) newZindex = currentZindex;

            $(current).setStyle('z-index', newZindex + i);

        }, this);

        this.focused = instance;

    }

});

</code>

This appears to be a bug for my uses, but I could be doing things incorrectly as well. =/ I now have to test if this changes functionality elsewhere in the application.

Thanks,

~Philip