Hi,
I have a 2 column layout with a left nav and main content area implemented using a table. I have sliders in the left nav and the left nav is of a greater height than the main content area. When the sliders are dynamicallly displayed during page load, it causes the left nav to be expanded vertically. In Firefox, this expansion causes content at the bottom of the left nav to get clipped rather than the cell expanding to accommodate the new content.
I have implemented the same layout in CSS with the same result. The below example reproduces this problem although I have to press Ctrl + F5 in Firefox to get it to exhibit the problem with this example...in my real application it occurs when the page is opened.
<%@dotnet.itags.org.PageLanguage="C#"AutoEventWireup="true"CodeFile="Default2.aspx.cs"Inherits="Default2" %>
<%@dotnet.itags.org.RegisterAssembly="AtlasControlToolkit"Namespace="AtlasControlToolkit"TagPrefix="AtlasControlToolkit" %>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>Untitled Page</title>
</head>
<body>
<formid="form1"runat="server">
<div>
<atlas:ScriptManagerID="ScriptManager1"runat="server"EnablePartialRendering="true"/>
<tablewidth="100%"cellpadding="0"cellspacing="0">
<tr>
<tdnowrap="nowrap"bgcolor="#f4f4f4"valign="top">
<asp:PanelID="_hidePanel"runat="server"Width="250">
<asp:LabelID="_sliderValueLabel"runat="server"></asp:Label>
<asp:TextBoxID="_sliderTextBox"runat="server"Style="display: none;"></asp:TextBox>
<AtlasControlToolkit:SliderExtenderID="_slider"runat="server">
<AtlasControlToolkit:SliderPropertiesMinimum="1"Maximum="10"Steps="10"TargetControlID="_sliderTextBox"
Length="218">
</AtlasControlToolkit:SliderProperties>
</AtlasControlToolkit:SliderExtender>
<br/>
This text vanishes!!
</asp:Panel>
</td>
<tdwidth="99%"valign="top">
<atlas:UpdatePanelID="_hideUpdatePanel"runat="server">
<ContentTemplate>
<asp:LinkButtonID="_hideLink"runat="server"Text="Hide Panel"></asp:LinkButton>
<AtlasControlToolkit:CollapsiblePanelExtenderID="_hideCollapsiblePanel"runat="server">
<AtlasControlToolkit:CollapsiblePanelPropertiesTargetControlID="_hidePanel"ExpandControlID="_hideLink"
CollapseControlID="_hideLink"CollapsedText="Show Panel"ExpandDirection="Horizontal"
SuppressPostBack="true">
</AtlasControlToolkit:CollapsiblePanelProperties>
</AtlasControlToolkit:CollapsiblePanelExtender>
</ContentTemplate>
</atlas:UpdatePanel>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Cheers,
Jason
Thanks for the repro. I've created work item 3450 to track this.It seems that it might be a combination of the CollapsiblePanel and the Sliders that are causing this problem. The CollpasiblePanel creates a parent div to hold the content and gets the dimensions during intialisation. I am guessing that this might be happening before the sliders have initialised so that the dimensions of the wrapper div are not correct.
I noticed that when the ScrollContents attribute is set to false, the wrapper div overflow style is set to hidden in CollapsiblePanelBehaviour.js at line 456. When I change this to visible then the content is no longer clipped but the background colour of the containing table cell (see forum thread for repro) does not expand down with the expanded div content. I am not sure why the overflow is being set to hidden as I would have thought that all of the content in the panel that is being wrapped should always be visible.
This problem is still occuring in FF 2.0 although works OK in IE7.
OK...the hack of setting the overflow to visible doesn't work correctly as some of the overflowed content then overlaps with the content below instead of expanding the table cell as hoped. I removed the CollapsiblePanel, hiding the container on the server side instead, and the problem goes away so it is definitely related to the CollapsiblePanel.
No comments:
Post a Comment