滚动条始终在CollapsiblePanelExtender中可见

问题描述：

我有一个网页，我正在尝试设置，它会显示一些嵌套在CollapsiblePanelExtender内的Ajax Tables。表格嵌套正确，但样式表现奇怪。我最近开始使用Chrome的Inspector工具，并且我认为这是指向正确的方向，但我无法理解检查器显示的内容与我的.aspx文件中显示的不同。我也在Firefox中尝试了这一点，并且行为类似，所以这似乎不是Chrome专用的错误。滚动条始终在CollapsiblePanelExtender中可见

我在style设置overflow:hidden;为Ajax Panel该表被直接嵌套在，但在浏览器中显示时，将出现一个水平滚动条，并检查器示出了样式已变为overflow-y:hidden;。什么可能导致我的风格在我的.aspx文件中的设计和它在浏览器中的显示方式之间发生变化？
看来我的.aspx文件中指定的Ajax Panel被浏览器转换为<div>。我可以接受。奇怪的是，看起来在检查器中出现额外的<div>，我没有在我的.aspx文件中指定任何地方。这个额外的<div>从哪里来？

我的.aspx文件的最小再现：

<%@ 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>&nbsp;</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" /> 
             &nbsp;&nbsp; TITLE &nbsp;&nbsp; 
             <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>&nbsp;</td> 
       </tr> 
      </table> 
     </ContentTemplate> 
    </asp:UpdatePanel> 
</asp:Content>

督察输出的屏幕截图：

答

我似乎已经解决了这个问题。我相信这是由于它所针对的CollapsiblePanelExtender和Panel被分成不同的单元。将目标Panel向上移动到与CollapsiblePanelExtender相同的单元中后，滚动条消失。

<div>元素正在被复制，并且元素仍然存在。我仍然不明白为什么这些会以他们的方式出现。但似乎与滚动条显示的原因无关。由于这是我最初试图解决的问题，我想这是一个解决方案。

工作的.aspx

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true"> 
     <ContentTemplate> 
      <table width="960px"> 
       <tr> 
        <td>&nbsp;</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" /> 
             &nbsp;&nbsp; TITLE &nbsp;&nbsp; 
             <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>&nbsp;</td> 
       </tr> 
      </table> 
     </ContentTemplate> 
    </asp:UpdatePanel> 
</asp:Content>

滚动条始终在CollapsiblePanelExtender中可见

相关推荐