DropShadow visible when PopupControl is not...

So I'm trying to attach a DropShadowExtender to the same panel that is already attached to a PopupControlExtender. There are two issues that arise.

First, the shadow is always visible on the page even when the control is hidden by the PopupControlExtender.

Second, the shadow displays where the control would be located in its original position if all atlas code is removed from the page. When you first click on the control that causes the PopupControl to display the shadow jumps to where the control is now visible, as specified by the properties of the PopupControlExtender (offset some x and some y a certain direction from whatever control).

Can I modify the DropShadowExtender in some way to hide itself? Or do I have to try and create a new hybrid control that incoporates both the DropShadow and the Popup behavior together?

Have you tried setting TrackPosition="true" on the DropShadow?

Yes, I have the TrackPosition="true". Here, look at these pictures and maybe they will give you a better idea of what is happening.

This is how the page looks when it first loads:http://i48.photobucket.com/albums/f242/Braigo64/Popup_1.jpg
The popup is hidden but the dropshadow attached to it shows up.

This is how the page looks when you click the information icon:http://i48.photobucket.com/albums/f242/Braigo64/Popup_2.jpg
The popup appears and the dropshadow moves to the proper place.

This is how the page looks when the popup is dismissed:http://i48.photobucket.com/albums/f242/Braigo64/Popup_3.jpg
The popup is hidden again, but the dropshadow still shows up.

The question is, how can I hide the dropshadow? Is there a simple fix? Or do I have to create a new controlextender that incorporates both the popup behavior AND the dropshadow behavior on a control?

Thanks for the pictures - good demonstration of the problem!

I've played around with this a bit just now and find that adding the following lines to the end of this.setShadow in DropShadowBehavior.js fixes the problem for me when I try to simulate your scenario:

if (_shadowDiv) { _shadowDiv.get_style().visibility = this.control.element.style.visibility;}

The change simply makes the shadow DIV's visibility match that of the control it's shadowing.

Can you please give this a try and let me know? If it works for you, too, then I'll open a work item to make a change like this to DropShadow permanent.

Thank you. That indeed corrected the problem. This should definitely be part of the default behavior of the DropShadow.

The only thing is the shadow slightly lags behind the popup item when vanishing, but only for a split second. It's a minor glitch I can overlook for now. :P

Thanks again.

Now work item 709.

This has been checked in for the next Toolkit release. Check-in notes:

DropShadow now sets the visibility style of the shadow to match that of the TargetControlID. This allows it to auto-hide when hooked up to, for example, PopupControl. The default timer interval for the TrackPositionDelay mode was decreased from 100ms to 50ms to improve the default experience (note that the default delay can be changed via a script call to set_TrackPositionDelay if necessary). The PopupControl sample has been modified to include a DropShadow for the popups.

Is this in the June release (60626)?

I am using this release and still have this problem.

Andy.

It appears first in thenew 60731 release.

Cool, you lot really are on the ball!

Keep up the good work.

Andy.

Hey, ignorant question here, since I truly don't 'get' how the rounded corner extender actually does its job... but is there anyway to make sure that a rounded box drops a rounded shadow?
It will by default if both extenders are used.
I must've grabbed an older dll, then, b/c it doesn't on my machine. I'll try w/ the the latest one advertised above.

Ok, so I tried it with the latest release and the 'default' made a square shadow that's black. furthermore, the background color of the Div (set through a id-based selector in the css) only shows up where the rounded corners were, the rest of it were apprently transparent, as the shadow was showing through and where the shadow is indented on the left, it showed the background of the page itself.

I set some of the properties, namely opacity and rounded, and I got a lighter gray, rounded-corner dropshadow (as expected from your suggestions)... and still my div was transparent except where the rounded corner part is.

Interestingly enough, I did some mucking around and it appears that the thing that makes it break like that is setting the style (in this case height, width, and background-color) using the id-based selector. Haven't investigated the extender's code yet to see why that is, but when I moved the style info to a class in the same css instead of in the id-based selector, it worked fine. If I had to guess, I'd say that the controls probably look to see what the current style of the control is using the class(?). As good a guess as any until I ahve time to dig in deeper.

Yes - we need to get better about this. It's a problem with the DOM in general with computing "current" styles. We're not entirely consistant here.

Basically the problem is that

element.style.width

Will return a value for:

<div style="width:200px"/>

but not always for

.myStyle {

width:200px;

}

<div class="myStyle"/>