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
No comments:
Post a Comment