DropShadowExtender; Showing up on Top

I am using VS2008 and the included AJAX Control ToolKit

I have a master page that includes the scriptmanager and a panel with the DropShadowExtender

I have added a content page, that has a panel with a DropShadowExtender.

When the page displays, the 2nd DropShadow, goes UP, and displays on the top of the box. Basically an UPShadowExtender.

Any ideas to correct?

I have noticed a similar situation in the past if I am using tables or panels (and I would presume divs as well since panels are rendered as divs) I am trying to recall exactly what solved the issue but I do recall it had something to do with the width of each of the elements. I beleive if I had a table and had the extender to another control within that table, and the content in that table forced the outter table (or panel) to expand, I noticed that the dropshadow extender would push upwards.

Basically, what Im trying to say is, check your table, div, panel widths and heights. Make sure the content has ample room.

Hi,

Thank you for your post!

Create a simple repro for this issue if you can,and please post up the whole code of the repro.

Anyway, I agree withjgilmore. you should do moretroubleshoot wok and then you can provide us with more valuable information.

Best Regards,

DropShadowExtender with rounded corner & header

Hi,

I have a panel that I added a DropShadowExtender with rounded corner too. I would like to add a header.

Can this be done without adding a label to the panel to act as a header text?

I am not completely clear so I have misunderstood this please clarify further. Any markup inside the panel that is serving as a header whether it be an asp.net label or just text inside a styled div should work just fine.

DropShadowExtender with a Repeater

Hello all

Anyone know how I make this work.

I am trying to useDropShadowExtender with a Repeater.

I have tried.

When I have my DropShadowExtender code outside of my Repeater the DropShadowExtender can not find my panel.

When I put DropShadowExtender in the Repeater I get duplcate use of id error.

When use a DataBinder in the ID for the DropShadowExtender I getAtlasControlToolkit.DropShadowProperties does not have a DataBinding event.

You probably don't need an ID field in your DropShadowProperties declaration. If you've got one in there, just remove it, that should resolve the duplicate ID issue.

For the second issue, ASP.NET generally doesn't let you databind to non-control items, such as the DropShadowProperties class. You'll have to do this databinding in your DataBound event for the repeater. See an example of this at:

http://forums.asp.net/thread/1281071.aspx

dropshadowextender visible when its targetcontrol is not

Hi

I have read thsi post which addresses this problem

http://forums.asp.net/thread/1325356.aspx

I have downloaded the latest version of the toolkit and my dropshadowextender is visible when the control it's shadowing is not visible.

How can i modify the javsacript in DropShadowBehavior.js in my current dll. Presumably its embedded.

Thanks very much

andrea

Hi Andrea,

You can just edit the *.js files. You have torebuild the project for the changes to take effect though.

Thanks,
Ted
The fix mentioned in the above thread is known to work under at least some circumstances. Could you please post a simple sample demonstrating how it doesn't work in your scenario? That'll help us make a fix. Thanks.
thanks very much

dropshadowextender showing up awkward

Hello,

Having an issue with the dropshadowextender...in Firefox, it's working fine, but when using IE, the dropshadow is appearing above the panel, instead of below it. By that, I mean the shadow is at the very top of the panel, instead of the very bottom. Here's a live example so you can see what I am talking about:

head to: http://moglme.com/viewList.aspx?lid=195 and then click on any of the "Shop this store" links on the right hand side. the shadow starts how it's supposed to be, but moves to the top shortly after. any help would be appreciated :)

anyone? this is a issue that we need to get solved immediately, and i'm having trouble figuring out what is wrong

Hi,

I have looked at this in both IE version 7.0 and Firefox version 2.0.0.4 and the web page displays exactly the same in both. (The shadow is in the correct place.)

What version of IE are you using?

Cheers,

Matt

hello,

after about a week or 2, without changing anything in the code related to the drop shadow, it started behaving as intended. it's like it just magically started to work, don't know how it happened though

DropShadowExtender problem

Hi

I am trying to place a DropShadowExtender for an asp:panel which is bound with HoverMenuExtender. So if the user hovers over a link, the panel will show up and drops a shadow. But the problem is the shadow is always showing up and when a user hovers away from the link the hovermenu dissapers but shadow remains there. Anyone knows a solution?

Thanks.

Hi Zeeshan,

I would recommend adding anotherPaneland have the DropShadowExtender point to the old one and theHoverMenuExtender point to the new one. If your currentPanel has the IDMyPanel, then you would want something that looked like this:

<asp:Panel id="WrapperPanel" runat="server" ... >
<asp:Panel id="MyPanel" runat="server" ... >
...
</asp:Panel>
</asp:Panel>
<atlasToolkit:DropShadowExtender ID="dse" runat="server">
<atlasToolkit:DropShadowProperties TargetControlID="MyPanel" ... />
</atlasToolkit:DropShadowExtender>
<atlasToolkit:HoverMenuExtender ID="hme" runat="Server">
<atlasToolkit:HoverMenuProperties PopupControlID="WrapperPanel" ... />
</atlasToolkit:HoverMenuExtender>

Thanks,
Ted

Thank you so much Ted. I was wondering if I can have fade in/out effect on my HoverMenuExtender. I tried doing it with scripts on my page but it doesn't work as the panel is under control of the extender so the effect doesn't show up. Anyone knows any other way around?

Thanks

Hi Zeeshan,

Right now the only way to change the visual effects for any of the controls is to change the script. This is even more complicated forHoverMenuBehavior.js because you'll notice that it uses theSys.UI.HoverBehavior andSys.UI.PopupBehavior classes defined by "Atlas".

Thanks,
Ted

DropShadowExtender not attached to its panel

HELP PLEASE!!! I have put a DropShadowExtender on my login panel but when I run it, the dropshadow is completely detached from the panel itself! It is the correct size, shape, opacity, but the shadow is appearing a few inches down and to the right of the panel.

I've been banging on this for a WEEK and my head's about to explode.

1<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
2 <asp:ScriptManager ID="sm" runat="server" EnablePartialRendering="true" />
3 <asp:Panel ID="pnlLogin" runat="server" CssClass="LoginShadow">
4 <div style="padding:10px ; z-index:115">
5 User Name: <asp:TextBox ID="UserName" runat="server"></asp:TextBox><br />
6 Password: <asp:TextBox ID="Password" runat="server"></asp:TextBox><br />
7 <hr />
8
9 <asp:Button ID="LoginButton" runat="server" BackColor="#FFFBFF" BorderColor="#CCCCCC"10 BorderStyle="Solid" BorderWidth="1px" CommandName="Login" Font-Names="Verdana"11 Font-Size="0.8em" ForeColor="#284775" Text="Log In" ValidationGroup="Login"
12 OnClick="LoginButton2_Click">
13 </asp:Button>
14 </div>
15 </asp:Panel>
16 <ajaxToolkit:DropShadowExtender ID="dse1" runat="server"17 TargetControlID="pnlLogin"
18 Width="5"19 Rounded="true"20 Radius="6"21 Opacity=".7"22 TrackPosition="true"></ajaxToolkit:DropShadowExtender>
23</asp:Content>

What happens if you remove the HR tag? (Which forces line breaks...)

DropShadowExtender in a table

Hello,

Does anyone know why the DropShadowExtender doesn't show correctly when the panel control that it calls is under an html table?

The main problem is with the shadow.

Thanks

A simple sample page demonstrating the problem would probably be helpful here.

Some say an image is worth more than 1000 words

As you can see the top an bottom borders look funny.

That is using the same example as the one that the toolkit has, and only inserting the panel into a table, very simple, like this

<table>
<tr>
<td>
<asp:Panel ID="Panel1" runat="server" CssClass="dropShadowPanel" Width="500px">
<div style='padding: 10px'>
<p>
First Name:
<asp:TextBox ID="TextBox1" runat="server" Style='position: absolute; left: 100px;
width: 150px"></asp:TextBox>
</p>
<p>
Last Name:
<asp:TextBox ID="TextBox2" Style='position: absolute; left: 100px; width: 150px'
runat="server"></asp:TextBox>
</p>
<hr />
</div>
</asp:Panel>
</td>
</tr>
</table>

Thanks

I think it may have something to do with one of the other styles/attributes of your page. The below page containing your TABLE above and the necessary framework to get a drop shadow looks fine to me in IE6:

<%@. Page Language="C#" %><%@. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <atlas:ScriptManager ID="SM" runat="server"> </atlas:ScriptManager> <table> <tr> <td> <asp:Panel ID="Panel1" runat="server" CssClass="dropShadowPanel" Width="500px" Style="background-color: Lime"> <div style='padding: 10px'> <p> First Name: <asp:TextBox ID="TextBox1" runat="server" Style="position: absolute; left: 100px; width: 150px"></asp:TextBox> </p> <p> Last Name: <asp:TextBox ID="TextBox2" Style='position: absolute; left: 100px; width: 150px' runat="server"></asp:TextBox> </p> <hr /> </div> </asp:Panel> </td> </tr> </table> <atlasToolkit:DropShadowExtender ID="DSE" runat="server"> <atlasToolkit:DropShadowProperties TargetControlID="Panel1" Rounded="true" /> </atlasToolkit:DropShadowExtender> </div> </form></body></html>

Hi David,

Thank you for your answer.

I checked out the code for any differences, since it looked pretty much the same as mine. It had a few differences, and I removed some code until I found out what was causing it.
The problem is the Opacity property in DropShadowProperties, if you set that to any value < 1 then you will see the bug.

Weird. My sample looks fine for me in IE6 SP1 even with Opacity="0.5".

DropShadowExtender displaying differently

I have discovered that if I put a DropShadowExtender on a PopupControlExtender, it will make the popup not be transparent. In other words, it will cover any dropdownlists or textboxes on the form that the popup pops up over. I have written a date selection user control using these two controls. When I put the user control on one of my pages, the drop shadow works just fine. When I put it on another page, the drop shadow displays about 2 inches lower and to the right than it does on the first page. Any ideas what could be causing it to get confused like this?

Below is my user control code:

<%@dotnet.itags.org. Control Language="C#" AutoEventWireup="true" CodeFile="DatePicker.ascx.cs" Inherits="User_Controls_DatePicker" %
<aspAjax:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="tbDateSelected" runat="server" SkinID="DateTextBox" AutoPostBack="True"
OnTextChanged="tbDateSelected_TextChanged" CausesValidation="True"></asp:TextBox>
<asp:Image ID="imgPopupCal" runat="server" ImageUrl="~/images/calendar.gif" AlternateText="Select a date" />
<asp:Panel ID="Panel1" runat="server" CssClass="popupControl">
<center>
<asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="#999999"
CellPadding="1" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt"
ForeColor="Black" Width="160px" OnSelectionChanged="Calendar1_SelectionChanged">
<SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
<TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
<SelectorStyle BackColor="#CCCCCC" />
<WeekendDayStyle BackColor="#FFFFCC" />
<OtherMonthDayStyle ForeColor="#808080" />
<NextPrevStyle VerticalAlign="Bottom" />
<DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
<TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" />
</asp:Calendar>
<asp:ImageButton ID="imgCancel" runat="server" ImageUrl="../images/close.gif" OnClick="imgCancel_Click" />
</center>
</asp:Panel>
<ajaxToolkit:PopupControlExtender ID="pceDate" runat="server" PopupControlID="Panel1"
TargetControlID="imgPopupCal" Position="Bottom" CommitProperty="value" CommitScript="/* SEE OnLoad */">
</ajaxToolkit:PopupControlExtender>
<ajaxToolkit:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="Panel1"
Radius="6" Opacity="1" TrackPosition="true" Width="5">
</ajaxToolkit:DropShadowExtender>
</ContentTemplate>
</aspAjax:UpdatePanel>

Thanks,

Nick

Another thing I've noticed on the second page is that the dropshadow does not cover the textboxes and dropdown lists.

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 disappear on gridview selected index changes

Hello,

I have a gridview inside a panel wich is inside an updatepanel. My problem is when I click on my gridview and I select a row the shado and the rounded corners of the panel around the gridview disappear.

I can see the dropshadowextender, only on the first page load, after it disappears. I can't find any solution to keep the rounded corner and the shadow

Please try your scenario with the recently available61121 release of the Toolkit (and ASP.NET AJAX Beta 2). If the problem persists, then please reply with acomplete, self-contained sample page that demonstrates the problem so that we can investigate the specific behavior you're seeing. Thank you!

dropshadowextender causes a page to draw in 2 stages

All --

Please help.

Why is it that the dropshadowextender causes a page to draw in 2 stages?

How can it be avoided?

Here are the details.

I have an ASP.NET page written in C# using VS.NET and Ajax RC1.I have several 4 <DIV> tags on the page.I have a dropshadowextender assigned to each <DIV> tag.When the page loads, it draws in 2 stages.In the 1st stage, the page loads and is drawn as it would look without any Ajax. This view is shown only briefly, about 1 second -- but, it is very visible and noticable.In the 2nd stage, the page is redrawn (or modified) to have the Ajax effects applied. This view remains static until the next refresh.

Is there a workaround?

BTW, the same thing happens with the roundedcornersextender, but the 1st draw of the page lasts much less than a second, so it is hardly noticable.

Please advise.

Thank you.

-- Mark Kamoski

I ran into the similar problem to you when I applyAjax:DropShadowExtender to aasp:Panel. Sometimes the position of the drop shadow will take place changes when pressing F5 to refresh current web page. It is very slow when loading web controls for the first time or pressing?F5?to?refresh current web page.
DropShadow is an extender which applies a "Drop Shadow" to a Panel. It allows you to specify how wide the shadow is as well as how opaque it is, or if you would like rounded corners. For pages that allow the user to move or resize the panel, the DropShadow has a mode that will resize/reposition it to match that of the target panel at run time.

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 target panel separate when window is resized

So here's what's up.

I've got a horizontally scrolling asp panel.

In the panel is a datalist which repeats horizontally.

I have a web user control set as the item template. The user control makes use of the DropShadowExtender.

It works beautifully, until the window is resized, then the shadows and user controls part their ways.

Any ideas?

hello?

DropShadowExtender and SetFocus

Hi there,

I'm trying to set the focus to a textbox while using the DropShadowExtender, but it does not seem to work.

The code is something like this:

<asp:Panel id="panelContainer" runat="server">

<asp:Textbox id="txtName" runat="server" />

</asp:Panel>

<atlasToolkit:DropShadowExtenderID="dseLogin"runat="server"><atlasToolkit:DropShadowPropertiesTargetControlID="panelContainer"Width="5"Rounded="true"Opacity=".75"TrackPosition="true"ID="dsBehavior"/></atlasToolkit:DropShadowExtender>

And in the code behind:

protectedvoid Page_Load(object sender,EventArgs e)

{

this.SetFocus(this.txtName);

}

What am I doing wrong? Is this a bug? Is there a workaround?

Thanks,

Rudy

Try searching this forum group (groupid:34) for SetFocus, I seem to recall seeing a post about this emitting code that couldn't be read correctly by Atlas. Maybe? I'm taking a stab but try to find the existing posts.
I did search for similar problems with SetFocus, but the posts I found were related to the TextBoxWatermarkExtender, not the DropShadowExtender.

This problem happens (I think) because the ASP.NET call to WebForm_AutoFocus (inserted by Page.SetFocus) happens before Atlas load. When Atlas loads and DropShadow initializes, it needs to mess around with the DOM and I think the manipulations it does end up losing the focus. My recommendation is to set the focus with the following instead as Application.load fires only AFTER Atlas and related code is finished initializing:

<script type="text/javascript">
Sys.Application.load.add(function() { $("txtName").focus(); });
</script>

The complete sample follows:

<%@. Page Language="C#" %><%@. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected override void OnLoad(EventArgs e) { base.OnLoad(e); }</script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <atlas:ScriptManager ID="ScriptManager1" runat="Server"> </atlas:ScriptManager> <asp:Panel ID="panelContainer" runat="server"> <asp:TextBox ID="txtName" runat="server" /> </asp:Panel> <atlasToolkit:DropShadowExtender ID="dseLogin" runat="server"> <atlasToolkit:DropShadowProperties TargetControlID="panelContainer" Width="5" Rounded="true" Opacity=".75" TrackPosition="true" ID="dsBehavior" /> </atlasToolkit:DropShadowExtender> </div> </form> <script type="text/javascript"> Sys.Application.load.add(function() { $("txtName").focus(); }); </script></body></html>

DropShadowExtender and positioning

Hello, I just started messing around with the toolkit and started with the DropShadowExtender. I can't, for the life of me, get it to work with various positioning styles. For instance, consider the following simple example:

<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
.overall
{
position: relative;
left: 10px;
top: 10px;
;
height: 500px;
background-color: Silver;
}
.above
{
position: absolute;
margin-left: 10px;
margin-top: 10px;
z-index: 2;
width: 200px;
height: 200px;
background-color: Green;
}
.below
{
position: absolute;
top: 0px;
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="above">
Here's some text in a box.</asp:Panel>
<cc1:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="above" Opacity=".5" Rounded="true" TrackPosition="true">
</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>

What could I possibly be doing wrong? These utilities must be able to work with positioned elements, no? Any insight is much appreciated. Thanks!

Anyone? Anyone? Bueller?

I'd really appreciate any insight on this... Looking through the forums, it appears this extender may simply not work with positioned elements. That's a huge disappointment, but I can live with ditching it if it got a firm denial anywhere. However, it seems whenever anyone raises this issue it simply gets ignored. If this extender doesn't work with positioned elements, it would be great to have a release note or known issue added to the documentation to avoid anyone wasting so much time to find out if it works or there is a workaround. Can anyone else at least copy and paste this code and build a project really quickly just to verify that this is not working? As you can see, it's not an enormously complicated bit of CSS, so I'd like to know if anyone is actually using this extender and seeing it work in any sort of good real-world environments. Heck, I'd like to see if anyone can even get it to work in a testing environment. Thanks...

Can someone at least verify that this is not an isolated issue?

Does this control work, or what? Can NOBODY show a working example with positioned elements? Please? Is this a sore subject, am I missing a FAQ somewhere, or what - I find it crazy that nobody can even take the time to respond to this thread...

Hi Tucker973,

As we know DropShadowExtender works based on complex JS and CSS code, so it is not recommanded to attach many CSS. Based on my experience, I suggest that you should put it into a container and then use css to control its position instead of doing this on DropShadowExtender directly.Here is the working sample.

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"></script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title> <style type="text/css"> .dropShadowPanel { width:300px; background-color:#5377A9; color:white; font-weight:bold; } .containerPanel { margin-left:200px; margin-top:200px; } </style></head><body> <form id="form2" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:Panel ID="container" runat="server" CssClass="containerPanel"> <asp:Panel ID="Panel1" runat="server" CssClass="dropShadowPanel"> <div style="padding:10px"> First Name: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br /> Last Name: <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br /> </div> </asp:Panel> <ajaxToolkit:DropShadowExtender ID="DropShadowExtender1" runat="server" BehaviorID="DropShadowBehavior1" TargetControlID="Panel1" Width="5" Rounded="true" Radius="6" Opacity=".75" TrackPosition="true" /> </asp:Panel> </form></body></html>

Best regards,

Jonathan

Interesting, thanks for the reply. It's working a bit better, but I'm still having an issue with the 'shadow' div getting placed way far away regardless of the "width" setting. I'll continue to mess with it though, this is definitely a step in the right direction. Thanks again.

<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><%@. 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 runat="server"> <title>Untitled Page</title> <style type="text/css"> .overall { position: relative; left: 10px; top: 10px; ; height: 500px; background-color: Silver; } .above { position: absolute; margin-left: 50px; margin-top: 50px; z-index: 2; } .aboveinside { width: 200px; height: 200px; background-color: Green; } .below { position: absolute; top: 0px; 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"> <div class="above"> <asp:Panel ID="above" runat="server" CssClass="aboveinside"> Here's some text in a box.</asp:Panel> </div> <cc1:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="above" Width="1" Opacity=".5" Rounded="true" TrackPosition="true"> </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>

Hi Tucker973,

<%@. 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>

Best regards,

Jonathan

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 and asp .net 2.0 Menu Control

Hi, i'm having a problem using DropShadowExtender, when i use it in a panel bellow my menu (menu displaying items in hotizontal with children), the children menu items, appear behind the panel witch the DropShadowExtender is bounded.

Has anyone expererienced this? If so is there a simple solution to it?

I've tried to change several properties of the div where my menu is inserted, and did'nt work.

Thanks.

hi joao_matos,

Could you provide some sample code that shows what's going wrong? I'm not quite following your description.

Thanks,
Ted

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 :)

DropShadowExtender

I am totally new to AJAX, and I have downloaded the Toolbox and the framework. Cool stuff. It really makes programming easier and web-pages more functionally.

I have also seen the movie about the Dropshadowextender, and Now I want to use it in one of my own web-sites.

I have a menu in the left side, and the menu is build within an UpdatePanel. Inside the updatePanel I have a panel (with some text), and it is the Panel that I want to have a shadow around.

When I put the DropShadowExtender to the ASPX-page, and choose PANEL1 as the TargetControlID I get the following error:

System.InvalidOperationException: The TargetControlID of 'DropShadowExtender1' is not valid. A control with ID 'Panel1' could not be found.

That happens no matter if I put the Extender inside or outside the updatepanel.

Please help me. I buy you a beer when you come to Denmark if you can help me

thanks in advance.

Søren Jensen

Hi,

You're saying that if you put the extender inside the UP it works so... what is the problem ?

I need to apologize for my bad english :-)

I mean that it does not work even if I put the extender inside the UP.

Søren

No problem! english is not my spoken langage too...

I've just tried what you describe and it worked for me.
What version of Atlas are you using ? the v1.0 beta 1 or older CTP ?
Maybe can you copy some code here ?

I have just downloaded V1.0 Beta 1.....

I will try to build a new site later today, and post some code in here. THX