Rounded Corners not working with a collapsible panel

Is there a trick to getting the rounded corners extender to work on a panel which is also being extended by the collapsible panel extender? I have set "Track Position" to True, but it does not seem to track the panel properly when it is expanded. The same is true of the Drop Shadow extender. If I turn off the corner rounding, the drop shadow works fine, but when I enable it, the results are unpredictable. I belive this is a bug in the rounded corners extender, but I don't know for sure. I don't really know enough about these controls to fix them - can anybody offer a suggestion?

Jon

I would agree that the ajax rounded corners extenders are at least buggy, if not down right a big waste of time. They make gridviews invisible, work inconsistantly, and if you put a gridview in a panel it is also useless.

I give up. I will format the rounded corners the old fashioned way.

Well, apparently this wasn't fixed by v.10606, as I'm experiencing some very odd behavior with the rounded corners extender used in conjunction with the collapsible panel extender.

I have a collapsible panel extender on a content panel and the header panel has a rounded corners extender. At run time the page loads with the header corners rounded and the content panel is collapsed as it should be. When I click on the header panel to expand the content panel, it expands properly. But when I click on the header again to collapse the content panel, it (the content panel) closes and thenreopens immediately. The text set for the collapsed state of the content panel doesn't show when it closes momentarily, either.

Simply commenting out the rounded corners extender returns the collapsible panel to its normal behavior.

I'm wondering if it has anything to do with some height settings I have set for the panels - could there be a conflict with some inherent size value for the panels between the rounded corners and collapsible panels extenders?

Anyone else run into this and/or a fix?

Thanks!

RoundedCornersExtender and Panel visibility

Hello

I'm experiencing a few difficulties with the RoundedCornersExtender.

I was trying to show/hide a panel extended by the RoundedCornersExtender.

In the html part, i set the style of the panel this way : style="visibility:hidden;"

Then, with javascript, i do : document.getElementById("myPanel").style.visibility = "visible";

But my panel then does not appear as he should. He contents nothing....

Here's a few code :

the HTML part :

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager><asp:Panel ID="myPanel" runat="server" BackColor="#FFFF80" Height="50px" Width="125px" HorizontalAlign="center" style="visibility:hidden;"> Some Text here...</asp:Panel><ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="myPanel" Radius="10" BorderColor="black" Corners="All"></ajaxToolkit:RoundedCornersExtender><div onclick="doThing();">click me</div>

and the javascript part :

 <script type="text/javascript"> function doThing() { document.getElementById('myPanel').style.visibility='visible'; } </script>

Can someone help me to find a way to show/hide a panel with roundedCorners?

Thanks for your help

John

PS : Sorry for my poor english skills

Hi John,

The reason is that the 'myPanel' element isn't the one defined on your page anymore.

Once the element is extended by a RoundedConerExtender, the element itself will lose its ID. The RCExtender will then create a div element wrap the original element, and assign the ID of the original element to the new one.

So, you'll get this:

<div id='myPanel' > // this div is created by the RCExtender

<div style=....></div> // some other div representing the roundedcorner

<div style='visibility : hidden' >some text here</div> // your original element, note that it doesn't hold the ID anymore and its style is inherited from original settings in source

<div style=....></div> // some other div representing the roundedcorner

</div> //end of wrapper

As you can see, your script didn't change the visibility of the actual element. Thus it still can't be seen.

To workaround it, you may hide it via javascript when the page is loaded rather than set its visibility explicitly in source. For instance:

<%@. 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>
</head>
<body>
<form id="form1" runat="server">
<div>

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Panel ID="myPanel" runat="server" BackColor="#FFFF80" Height="50px" Width="125px" HorizontalAlign="center">
Some Text here.... Note that style property isn't set
</asp:Panel>
<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="myPanel" Radius="10" BorderColor="black" Corners="All">
</ajaxToolkit:RoundedCornersExtender>
<div onclick="doThing();">click me</div
<script type="text/javascript">
function doThing()
{
document.getElementById('myPanel').style.visibility='visible';
}
function pageLoad()
{ // this method is called when the page is loaded
document.getElementById('myPanel').style.visibility='hidden'; // this line hides the wrapper
}
</script>

</div>
</form>
</body>
</html>

Hope this helps.

Thanks a lot!

I didn't figure out that the new div without id was inheriting it's style from the previous one. I thought that only the new div that holds the id would...

Your solution works great for my problem.

Once again, thank you!

John