DropShadowExtender display issue

Im jsut playing about with the drop shadow extender and when i come to use it for the first time i have hit a major snag.

I have bound it to a panel which contains some text, when i run the page, i get the rounded corners of the panel, but the shadow (or I shoud say a black image the same size of the panel) appears about an inch lower down on the screen and not even remotely connected to the panel, let alone behind it to give a shadow effect.

Anyone else run into this?

I am having the same issue. Is there a solution to this?

...Have you tested this in both IE7 and FireFox?

If it displays properly in one but not the other it's probably due to HTML rendering.

You can resolve this behavior by removing HTML tags, especially tags like HTML header tags.
Replace them with ASP.NET CSS, then they should render properly in the toolkit div sections.

Yes, it's hosed the same in Firefox.

Surely someone, somewhere is using this thing somehow got it working outside of the samples.

I've recreated this page four times now and it's still not working correctly.

DropShadowExtender brought shadow in part area of the Table not only in a expectation area

Hi all,

Does yourDropShadowExtender work well? I added a panel outside of a Tabel in an existing system and usedDropShadowExtenderat the panel. But it brought shadow in part area of the table not only in the expectation area.

What's wrong?

Thanks in advance.

lsw93

Hi all,

I fixed it by adding background color (white) to the wrong shadow area.

thanks,

lsw93

DropShadowExtender and centered page

I'm centering a page by usingmargin:0pxauto;

on the body style. The problem is that the drop shadow is offset by the same distance as the left margin.

Is there any work around to this?

Sorry, I mean I havemargin:0pxauto; on a wrapper div, not on the body.
Sorry for the trouble - pleaseopen a work item to report and track this issue. Thank you!

dropshadowextender - how to show and hide in javascript

Hello

How would i turn a dropshadowextender on and off in javascript. In essence i need to show and hide teh drop shadow at different points.

Thanks

andrea

Hi Andrea,

The easiest approach is to set the width of the drop shadow to0, like the sample page does inchkShadow'sonclick. You can do it using$object('dsBehavior').set_Width(0);.

Thanks,
Ted
thanks :)

Dropshadow too low

I am have a problem with the dropshadow extender placing the shadow too low on the page. I have a series of asp panels on a page that are targets of dropshadow extenders, for some reason all of the shadow are being postioned too low on the page. It seem that the top shadow is is getting a sytle element with a top value that is placing it too low on the page, and then all of the other dropshadow extender panels are offset by the same value.

Can anyone shed some light as to how the dropshadow extender determines its top position? I assmed that I would be with regard to the posotion of the target panel, but that doesn't seem to be the case here.

Thanks.

Any help welcome!

Hi Audley9,

This kind of issues is usually caused by the css settings. Here is my sample that you can reference to. Please compare it with yours.

<%@. Page Language="C#" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title>Untitled Page</title> <style type="text/css">.overall { left: 10px; top: 10px; ; height: 500px; background-color: Silver; } .above { position: absolute; margin-left: 50px; margin-top: 50px; z-index: 2; } .aboveinside { width:300px; background-color:#5377A9; color:white; font-weight:bold; } .below { margin-top: 10px; left: 0px; width: 300px; height: 200px; z-index: 1; background-color: Blue; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <div class="overall"> <asp:Panel ID="above" runat="server" CssClass="aboveinside"> <div style="padding:10px"> Here's some text in a box. </div> </asp:Panel> <cc1:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="above" Width="5" Opacity=".5" Rounded="true" TrackPosition="true" Radius="6"> </cc1:DropShadowExtender> <div class="below">This is some text underneath... This is some text underneath... This is some text underneath... This is some text underneath... This is some text underneath... This is some text underneath... This is some text underneath... This is some text underneath... This is some text underneath... This is some text underneath... </div> </div> </form></body></html>

I hope this help.

Best regards,

Jonathan

Thnaks for Answering!

I had solved this issue already but forgot to come back to this post. Whit my situation, I had a series of nested "Div' Tags that had "Postion: relative", set to the divs. I was trying to acomplish a rather complex layout using Css, which I was not able to acomplish (there were other issue besides this one), so I have had to intermingle css with table layout.

Thanks for the help!

DropShadow Resize problem with the Shadow remaining on table resize.

The code below is just a sample I added to the DropShadow and I pretty sure this is a bug.

What happens when load up is fine. When you move items from the left listbox to the right listbox it seems fine.

EXCEPT, when one listbox becomes empty, the listbox shrinks, hence the table shrinks and then your left with this big black shadow on the right that goes up to the table. That is the shadow has not resized with the table.

If I addWidth="100%" to the Panel yes it works but then my screen design is not what I want I have this massive table on the screen. It's the solution I'm forced to use now.

<divclass="demoarea">

<divclass="demoheading">DropShadow Demonstration</div><asp:PanelID="Panel1"runat="server"CssClass="dropShadowPanel"Width="100%"><divstyle="padding:10px">

<tableborder="2"width="100%">

<tr>

<tdcolspan="3"align=center> </td>

</

tr>

<

tr><td>

<asp:ListBoxRows="20"SelectionMode="Multiple"ID="lbListLeft"runat="server"><asp:ListItem>Somewhere RSL Club, 555 Something St, Somewhere</asp:ListItem><asp:ListItem>20</asp:ListItem>

<asp:ListItem>D</asp:ListItem></asp:ListBox><br/></td><td><NOBR><inputvalue="Add >>" type="button"BR></NOBR><NOBR><inputvalue="Add <<" type="button"BR></NOBR><NOBR><inputvalue="Add All >>" type="button"BR></NOBR><NOBR><inputvalue="Add All <<" type="button"BR></NOBR></td><td>

<br/><asp:ListBoxRows="20"SelectionMode="Multiple"ID="lbListRight"runat="server"><asp:ListItem> RSL Club, 154 Somewhere Pde, Somewhere</asp:ListItem><asp:ListItem>2</asp:ListItem><asp:ListItem>3</asp:ListItem>

</asp:ListBox></td>

</

tr>

</

table>

Did you set "TrackPosition='true'" on the DropShadowProperties?

Yes I haveTrackPosition="true"as it came from the example.

Here's the complete code in a master page. YOu'll notice that once you move all items to one listbox the table shrinks I have mentioned. I've done some slight changing to the html but this content page should work standalone. Unless you tweak the Content Placer then you'll have to tweak the javascript.

<%

@.PageLanguage="C#"MasterPageFile="~/Site.master"AutoEventWireup="true"CodeFile="DropShadow.aspx.cs"Inherits="DropShadow_DropShadow"Title="DropShadow Sample" %>

<%

@.RegisterAssembly="AtlasControlToolkit"Namespace="AtlasControlToolkit"TagPrefix="atlasToolkit" %>

<

asp:ContentID="Content1"ContentPlaceHolderID="MiddleContent"Runat="Server"><atlas:ScriptManagerid="ScriptManager"EnablePartialRendering="true"runat="Server"/><divclass="demoarea"><asp:PanelID="Panel1"runat="server"CssClass="dropShadowPanel"><divstyle="padding:10px">

<

tableborder="0"width="100%">

<tr><td><tableborder=0width="100%">

<tr><tdalign="right"><asp:ListBoxRows="20"SelectionMode="Multiple"ID="lbListLeft"runat="server"><asp:ListItem>Kogarah RSL Club, 254 Railway Pde, Kogarah</asp:ListItem><asp:ListItem>20</asp:ListItem><asp:ListItem>30</asp:ListItem><asp:ListItem>40</asp:ListItem><asp:ListItem>A</asp:ListItem><asp:ListItem>B</asp:ListItem><asp:ListItem>C</asp:ListItem><asp:ListItem>D</asp:ListItem></asp:ListBox></td></tr></table><br/><br/></td><td><NOBR><inputvalue="Add >>"onclick="moveDualList( this.form.ctl00$MiddleContent$lbListLeft, this.form.ctl00$MiddleContent$lbListRight, false );"type="button"style="width:90"><BR></NOBR><NOBR><inputvalue="Add <<"onclick="moveDualList( this.form.ctl00$MiddleContent$lbListRight, this.form.ctl00$MiddleContent$lbListLeft, false );"type="button"style="width:90"><BR></NOBR><NOBR><inputvalue="Add All >>"onclick="moveDualList( this.form.ctl00$MiddleContent$lbListLeft, this.form.ctl00$MiddleContent$lbListRight, true );"type="button"style="width:90"><BR></NOBR><NOBR><inputvalue="Add All <<"onclick="moveDualList( this.form.ctl00$MiddleContent$lbListRight, this.form.ctl00$MiddleContent$lbListLeft, true );"type="button"style="width:90"><BR></NOBR></td><td>

<br/>

<br/><asp:ListBoxRows="20"SelectionMode="Multiple"ID="lbListRight"runat="server"><asp:ListItem> RSL Club, 154 Railway Pde, Kogarah</asp:ListItem><asp:ListItem>2</asp:ListItem><asp:ListItem>3</asp:ListItem><asp:ListItem>4</asp:ListItem><asp:ListItem>5</asp:ListItem><asp:ListItem>D</asp:ListItem><asp:ListItem>G</asp:ListItem><asp:ListItem>K</asp:ListItem><asp:ListItem>Z</asp:ListItem><asp:ListItem>55</asp:ListItem></asp:ListBox></td>

</

tr>

<

tr><tdcolspan=3align=center><asp:ButtonID="btnSave"Text="Save"runat=server/></td></tr>

<

tr><tdcolspan=3>

</

td></tr>

</

table>

<

br/><br/><hr/><p><asp:PanelID="CollapseHeader"runat="server"style="cursor: pointer;"width="100%"><asp:LabelID="Label1"runat="server"Text="Label">Show Details...</asp:Label></asp:Panel><asp:PanelID="Panel2"runat="server"style="overflow:hidden;height:0"width="100%">

Not many details here. This is just a demo to show how the DropShadow will react properly to changes in the size of the panel it is attached to.

</asp:Panel><atlasToolkit:CollapsiblePanelExtenderID="cpe1"runat="server"><atlasToolkit:CollapsiblePanelPropertiesTargetControlID="Panel2"Collapsed="true"CollapsedText="Show Details..."ExpandedText="Hide Details"TextLabelID="Label1"ExpandControlID="CollapseHeader"CollapseControlID="CollapseHeader"SuppressPostBack="true"/></atlasToolkit:CollapsiblePanelExtender></p></div></asp:Panel><divclass="demobottom"></div></div><atlasToolkit:DropShadowExtenderID="dse"runat="server"><atlasToolkit:DropShadowPropertiesTargetControlID="Panel1"Width="5"Rounded='true'Opacity=".75"TrackPosition="true"ID="dsBehavior"/></atlasToolkit:DropShadowExtender>

<

SCRIPTLANGUAGE="JavaScript">

<!-- Begin

// Compare two options within a list by VALUES

function

compareOptionValues(a, b)

{

// Radix 10: for numeric values, Radix 36: for alphanumeric valuesvar sA = parseInt( a.value, 36 );var sB = parseInt( b.value, 36 );return sA - sB;

}

// Compare two options within a list by TEXT

function

compareOptionText(a, b)

{

// Radix 10: for numeric values, Radix 36: for alphanumeric valuesvar sA = parseInt( a.text, 36 );var sB = parseInt( b.text, 36 );return sA - sB;

}

// Dual list move function

function

moveDualList( srcList, destList, moveAll )

{

// Do nothing if nothing is selectedif (( srcList.selectedIndex == -1 ) && ( moveAll ==false ))

{

return;

}

newDestList =

new Array( destList.options.length );var len = 0;for( len = 0; len < destList.options.length; len++ )

{

if ( destList.options[ len ] !=null )

{

newDestList[ len ] =

new Option( destList.options[ len ].text, destList.options[ len ].value, destList.options[ len ].defaultSelected, destList.options[ len ].selected );

}

}

for(var i = 0; i < srcList.options.length; i++ )

{

if ( srcList.options[i] !=null && ( srcList.options[i].selected ==true || moveAll ) )

{

// Statements to perform if option is selected, Incorporate into new list

newDestList[ len ] =

new Option( srcList.options[i].text, srcList.options[i].value, srcList.options[i].defaultSelected, srcList.options[i].selected );

len++;

}

}

// Sort out the new destination list

newDestList.sort( compareOptionValues );

// BY VALUES//newDestList.sort( compareOptionText ); // BY TEXT// Populate the destination with the items from the new arrayfor (var j = 0; j < newDestList.length; j++ )

{

if ( newDestList[ j ] !=null ) destList.options[ j ] = newDestList[ j ];

}

// Erase source list selected elementsfor(var i = srcList.options.length - 1; i >= 0; i-- )

{

if ( srcList.options[i] !=null && ( srcList.options[i].selected ==true || moveAll ) )

{

// Erase Source//srcList.options[i].value = ""; srcList.options[i].text = "";

srcList.options[i] =

null;

}

}

}

// End -->

</

script>

</asp:Content>

DropShadow panel within another dropshadow panel

Hello,

I am trying to put a drop shadow extender on a panel around another drop shadow extender but the inside panel is acting funny. I have the panel rounded and looks great but the black shadow part is distorted and at the bottom of the indside panel ? I have tried position absolute in a few places and tried putting a div around it but still no change...

Any thoughts?

So, you are trying to nest one DropShadowExtender on a panel within another DropShadowExtender panel?
That is exactly what I am trying to do... Does anyone know how to make this work?

DropShadow not moving?

I have a DropShadow attached to a panel that is also a DragPanel and a ModalPopup. What happens is that I can move the panel but the shadow is moving after I drop the panel and not during the drag phase, then after I drop the panel the shadow redraws itself at the right place.

What can I do?

DropShadow in TrackPosition mode uses window.setTimeout to check for movement of its TargetControlID. It sounds like that event isn't firing during the drag operation and so you're not getting updated shadow positions. (Does this happen on all browsers?) You might consider making the DragPanel apply to a Panel that contains both the current content AND the DropShadow that's being attached to it. Then there won't be positioning to update since the shadow will automatically travel with its content.

Thank you David.