Scrollbars Always Visible in CollapsiblePanelExtender - html

Question

I have a web page I'm trying to set up that will show some Ajax Tables nested inside a CollapsiblePanelExtender. The table is nesting correctly, but the styles are behaving strangely. I recently started using Chrome's Inspector tool, and I think it's pointing me in the right direction, but I'm having trouble understanding why what the Inspector is showing is different from what is in my .aspx file. I've tried this in Firefox as well, and the behavior is similar, so this doesn't seem to be a Chrome-only bug.
I set overflow:hidden; in the style for the Ajax Panel that the tables are directly nested in, but when shown in a browser, a horizontal scrollbar appears, and the Inspector shows that the style has changed to overflow-y:hidden;. What could cause my style to change between the design in my .aspx file and the way it appears in the browser?
It seems the Ajax Panel I specify in my .aspx file is converted into a <div> by the browser. I can accept that. The odd part is, it appears that an additional <div> appears in the Inspector that I don't specify anywhere in my .aspx file. Where could this additional <div> be coming from?
Minimal reproduction of my .aspx file:
<%# Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site_old.Master" CodeBehind="TEST.aspx.vb" Inherits="MyProject.TEST" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<style type="text/css">
.MyCollapsePanelHeader
{
height:20px;
font-weight: bold;
padding:5px;
cursor: pointer;
vertical-align:middle;
font-size:small;
overflow:hidden;
}
.MyCollapsePanel
{
width:100%;
height:100%;
border: 1px solid #BBBBBB;
border-top: none;
overflow:hidden;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<table width="960px">
<tr>
<td> </td>
</tr>
<tr>
<td>
<asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"
TargetControlID="PanelContent"
ExpandControlID="PanelHeader"
CollapseControlID="PanelHeader"
Collapsed="true"
TextLabelID="lblHideShow"
ExpandedText="(Hide Details...)"
CollapsedText="(Show Details...)"
ImageControlID="img"
ExpandedImage="images/minus.gif"
CollapsedImage="images/plus.gif"
SuppressPostBack="true" >
</asp:CollapsiblePanelExtender>
<asp:Panel ID="PanelHeader" runat="server" CssClass="MyCollapsePanelHeader">
<table width="100%">
<tr>
<td>
<asp:Image ID="img" runat="server" Height="16px" ImageUrl="images/plus.gif" Width="19px" />
TITLE
<asp:Label ID="lblHideShow" runat="server" Text="Label">(Show Details...)</asp:Label>
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
<tr>
<td>
<asp:Panel id="PanelContent" class="MyCollapsePanel" runat="server">
<table width="100%">
<tr>
<td height="100%" runat="server">
<asp:Table ID="tbl1" runat="server" Width="100%" Height="100%"/>
</td>
<td height="100%" runat="server">
<asp:Table ID="tbl2" runat="server" Width="100%" Height="100%"/>
</td>
<td height="100%" runat="server">
<asp:Table ID="tbl3" runat="server" Width="100%" Height="100%"/>
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
Screenshot of Inspector Output:

Answer 1

I seem to have resolved this issue. I believe it was due to the fact that the CollapsiblePanelExtender and the Panel it was targeting were separated into different cells. After moving the target Panel up into the same cell as the CollapsiblePanelExtender, the scrollbars disappeared.
The <div> element is being duplicated and the overflow-y element is still present. I still don't understand why these appear the way they do. But it seems to be unrelated to why the scrollbar was showing. Since that was the issue I was originally trying to fix, I guess this counts as a solution.
Working .aspx
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<table width="960px">
<tr>
<td> </td>
</tr>
<tr>
<td>
<asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"
TargetControlID="PanelContent"
ExpandControlID="PanelHeader"
CollapseControlID="PanelHeader"
Collapsed="true"
TextLabelID="lblHideShow"
ExpandedText="(Hide Details...)"
CollapsedText="(Show Details...)"
ImageControlID="img"
ExpandedImage="images/minus.gif"
CollapsedImage="images/plus.gif"
SuppressPostBack="true" >
</asp:CollapsiblePanelExtender>
<asp:Panel ID="PanelHeader" runat="server" CssClass="MyCollapsePanelHeader">
<table width="100%">
<tr>
<td>
<asp:Image ID="img" runat="server" Height="16px" ImageUrl="images/plus.gif" Width="19px" />
TITLE
<asp:Label ID="lblHideShow" runat="server" Text="Label">(Show Details...)</asp:Label>
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel id="PanelContent" class="MyCollapsePanel" runat="server">
<table width="100%">
<tr>
<td height="100%" runat="server">
<asp:Table ID="tbl1" runat="server" Width="100%" Height="100%"/>
</td>
<td height="100%" runat="server">
<asp:Table ID="tbl2" runat="server" Width="100%" Height="100%"/>
</td>
<td height="100%" runat="server">
<asp:Table ID="tbl3" runat="server" Width="100%" Height="100%"/>
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>