Monday, March 26, 2012

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".

No comments:

Post a Comment