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 thestylefor the AjaxPanelthat 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 tooverflow-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
PanelI 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:
I seem to have resolved this issue. I believe it was due to the fact that the
CollapsiblePanelExtenderand thePanelit was targeting were separated into different cells. After moving the targetPanelup into the same cell as theCollapsiblePanelExtender, the scrollbars disappeared.The
<div>element is being duplicated and theoverflow-yelement 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