2012年3月24日土曜日

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

0 件のコメント:

コメントを投稿