Right border not showing in CollapsiblePanel

I have a problem with the CollapsiblePanelExtender. The right border of the panel is not showing at all. The weird thing is that the left, top, and bottom borders are showing perfectly. I tried using a cssclass with the borders declared in it, with no success. Also, I have the height property of the panel in 0px to prevent it from flicking at page load, and the overflow:hidden in the css class. Any ideas why this happens? Thanks!

I guess there is not enough space on the right side to display the border. Remove overflow:hidden to see whether it shows the border, if it does then adjust the width of the container to fully acommodate the panel.

The container's width is 1024px and the panel is just 600px. I removed the overflow:hidden property and it's still not working. I also made a new web site and generated a new collapsiblePanel. It did'nt work either, maybe I am making some kind of mistake. Here is the aspx code:

%@. 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>
</head>
<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<asp:Panel ID="Panel1" runat="server" Height="192px" Style="left: 332px; position: absolute;
top: 44px; border-left-color: fuchsia; border-bottom-color: fuchsia; border-top-color: fuchsia; border-right-color: fuchsia;" Width="249px">

<asp:Panel ID="Panel2" runat="server" Height="205px" Style="border-left-color: fuchsia;
border-bottom-color: fuchsia; border-top-style: solid; border-top-color: fuchsia;
border-right-style: solid; border-left-style: solid; border-right-color: fuchsia;
border-bottom-style: solid" Width="400px">
</asp:Panel>
</asp:Panel>
<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" CollapseControlID="Button2"
CollapsedText="I'm collapsed..." ExpandControlID="Button2" ExpandedText="I'm expanded"
TargetControlID="Panel1" TextLabelID="Hola!" Collapsed="True" CollapsedSize="0" ExpandedSize="400">
</cc1:CollapsiblePanelExtender>
<asp:Button ID="Button2" runat="server" Style="left: 397px; position: absolute; top: 18px"
Text="Button" />

</form>
</body>
</html

In the above code, Panel1 width is 249px which is less than Panel2's width 400px. Removing Panel1's Width="249px" attribute shows the right border.

<asp:Panel ID="Panel1" runat="server" Height="192px" Style="left: 332px; position: absolute;
top: 44px; border-left-color: fuchsia; border-bottom-color: fuchsia; border-top-color: fuchsia; border-right-color: fuchsia;">

RoundedCornersExtender issue....Horizontal Lines

Is anyone having issues with the RoundedConersExtender showing up as horzontal lines on top and bottom of the control? I have a single RCE on a page that has 4 controls attached to it and 2 of them render correctly and the other 2 appear to be stretched out displaying as lines. Also on the login screen using the login control I have the same issue. The login control is with in an update panel. If authentication fails a message is displayed with in the login control but then the horizontal lines appear on top and botton of the panel. The RCE does render correctly when initially loaded though. Any ideas?

Thanks,

Michael

If this is IE-only, then it's due to what seems like an IE rendering bug. I'd thought I'd fixed this at one point, but I see it's back due to a global change we made recently to access styles properly. However, that breaks the IE workaround. I've fixed this again, I think. Trydevelopment release 5412 or later, please. Or change your RoundedCornersBehavior.js to have the bold lines (and recompile, etc.):

if (e.style.height) {
// Increase the height to account for the rounded corners
e.style.height = parseInt(CommonToolkitScripts.getCurrentStyle(e, 'height')) + (_radius * 2) + "px";
} else {
// Note: Do NOT use CommonToolkitScripts.getCurrentStyle in the check below
// because that breaks the work-around
if (!e.style.width && (0 < originalWidth)) {
// The following line works around a problem where IE renders the first
// rounded DIV about 6 pixels too high if e doesn't have a width or height
e.style.width = originalWidth + "px";
}
}

Thanks, I will give it a try!

Michael

The problem has been cured!!!

Thanks,
Michael

I have the similar problem and the bold lines you mentioned is already in place.

Any idea?

Goto thewww.CodePlex.com link in David's post and download the the latest version of the source code . Recompile and replace the appropriate dll's in the you bin folder. Not sure when the next CTP is going to be released, but downloading and recompiling fixed the issue on my end.

Michael

Hi,

We just released the lastest version 60914 on 9/15 onCodePlex.

Thanks,
Ted