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>