0
웹 페이지를 설정하려고하는데 Ajax Tables이 CollapsiblePanelExtender 안에 중첩되어 있습니다. 테이블이 올바르게 중첩되어 있지만 스타일이 이상하게 작동합니다. 최근 Chrome의 Inspector 도구를 사용하기 시작했는데 올바른 방향으로 나를 가리키고 있다고 생각하지만 Inspector가 보여주는 내용이 내 .aspx 파일의 내용과 다른 이유를 이해하는 데 문제가 있습니다. 파이어 폭스에서도이 방법을 시도해 보았습니다.이 동작은 비슷하기 때문에 크롬 전용 버그는 아닙니다. 스크롤 막대가 항상 CollapsiblePanelExtender에 표시됩니다.
- 나는 아약스 테이블에 직접 중첩 된 것을
Panel의style에overflow:hidden;을 설정할 수 있지만 브라우저에서 표시 할 때, 수평 스크롤이 나타나고 경위는 스타일이overflow-y:hidden;로 변경되었음을 보여줍니다. .aspx 파일의 디자인과 브라우저에 나타나는 방식간에 내 스타일이 변경 될 수 있습니다. 내 .aspx 파일에서 지정하는 Ajax
Panel파일이 브라우저로<div>으로 변환 된 것으로 보입니다. 나는 그것을 받아 들일 수있다. 이상한 부분은 Inspector에 추가로<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> </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>
스크린 샷 : 