Question

在我的.net应用程序中，我有一个Accordion面板，下面是我有一个网格视图。问题是当扩展Accordion面板时，它与网格视图重叠。这是我的代码： -

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="VanSales.WebForm1" %>
 <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajx" %>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" >
 <head runat="server">
<title></title>
<style type="text/css">
    .text-input-normal
    {
        border: none;
        background: transparent;
        width: 196px;
        height: 26px;
        border: none;
        padding-left: 5px;
        background-image: url('Images/TextBoxBackground.gif');
        background-repeat: no-repeat;
        color: #897F67;
        font-weight: bold;
    }
    .list-item-normal
    {
        border: none;
        background: transparent;
        width: 200px;
        padding: 10px;
        height: 100px;
        border: none;
        background-image: url('Images/ListItemsBackground.gif');
        background-repeat: no-repeat;
        color: #897F67;
        font-weight: bold;
    }
    .drop-down-list .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer input
    {
        border: none;
        background: transparent;
        width: 166px;
        padding-left: 5px;
        height: 28px;
        border: none;
        background-image: url('Images/ComboBackground.gif');
        background-repeat: no-repeat;
        color: #897F67;
        font-weight: bold;
    }
    .drop-down-list .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button
    {
        margin: 0;
        padding: 0;
        background-color: #197fbc;
        background-image: url('Images/ComboArrow.gif');
        background-position: top left;
        border: 0px none;
        height: 28px;
        width: 28px;
        background-repeat: no-repeat;
    }
    .drop-down-list .ajax__combobox_itemlist
    {
        border-color: #7F9DB9;
        color: #897F67;
        font-weight: bold;
    }
    /* Accordion */.accordion
    {
        width: 400px;
    }
    .accordionHeader
    {
        border: 3px solid #4498c2;
        color: #897F67;
        background-color: White;
        font-family: Arial, Sans-Serif;
        font-size: 12px;
        font-weight: bold;
        padding: 5px;
        margin-top: 5px;
        cursor: pointer;
    }
    .accordionHeaderSelected
    {
        border: 3px solid #4498c2;
        color: #897F67;
        background-color: #dfdbd6;
        font-family: Arial, Sans-Serif;
        font-size: 12px;
        font-weight: bold;
        padding: 5px;
        margin-top: 5px;
        cursor: pointer;
    }
    .accordionContent
    {
        background: transparent;
        border: 3px solid #4498c2;
        padding-bottom: 25px;
        border-top: none;
        padding: 5px;
        padding-bottom: 10px;
    }
    .clear
    {
        clear: both;
    }
</style>
</head>
<body>
<form id="form1" runat="server">
 <ajx:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</ajx:ToolkitScriptManager>
<div style="background-image:url('Images/BackgroundDIV.gif');background-repeat:repeat-x;margin:auto;width:800px;height:1100px;">
    <!-- 1st row -->
    <div style="width: 600px;margin:auto;height:140px;">
    <!-- left floated div column 1-->
        <div style="height: 45px; width: 250px; float: left;margin-bottom:10px;margin-top:10px;">
            <asp:Label ID="Label16" runat="server" Text="Group:" Font-Bold="True"
                ForeColor="White"></asp:Label>
            <div style="">
                <ajx:ComboBox runat="server" ID="ComboBox7" DropDownStyle="DropDownList"  CssClass="drop-down-list"
                    AutoCompleteMode="SuggestAppend">
               <asp:ListItem Value="2">Sales Returns</asp:ListItem>
                    <asp:ListItem Value="0">Sales Only</asp:ListItem>
                    <asp:ListItem Value="1">Returns Only</asp:ListItem>
               </ajx:ComboBox>
            </div>
        </div>
        <!-- end left floated div column 1-->
        <!-- right floated div column 2-->
        <div style="height: 45px; width: 250px; float: right;margin-bottom:10px;margin-top:10px;">
            <asp:Label ID="Label17" runat="server" Text="Company Name:" Font-Bold="True"
                ForeColor="White"></asp:Label>
            <div style="">
                <asp:TextBox ID="TextBox3" runat="server" CssClass="text-input-normal" ></asp:TextBox>
            </div>
        </div>
        <!-- end right floated div column 2-->
         <!-- left floated div column 3-->
        <div style="height: 45px; width: 250px; float: left;margin-bottom:10px;margin-top:10px;">
            <asp:Label ID="Label18" runat="server" Text="Company:" Font-Bold="True"
                ForeColor="White"></asp:Label>
            <div style="">
                <ajx:ComboBox runat="server" ID="ComboBox8" DropDownStyle="DropDownList"  CssClass="drop-down-list"
                    AutoCompleteMode="SuggestAppend">
               <asp:ListItem Value="2">Sales Returns</asp:ListItem>
                    <asp:ListItem Value="0">Sales Only</asp:ListItem>
                    <asp:ListItem Value="1">Returns Only</asp:ListItem>
               </ajx:ComboBox>
            </div>
        </div>
        <!-- end left floated div column 3-->
        <!-- right floated div column 4-->
        <div style="height: 45px; width: 250px; float: right;margin-bottom:10px;margin-top:10px;">
            <asp:Label ID="Label19" runat="server" Text="Description:" Font-Bold="True"
                ForeColor="White"></asp:Label>
            <div style="">
                <asp:TextBox ID="TextBox4" runat="server" CssClass="text-input-normal" ></asp:TextBox>
            </div>
        </div>
        <!-- end right floated div column 4-->

    </div>
    <!-- End 1st row  -->
    <!-- 2nd row -->
    <div style="width: 600px;margin:auto;height:182px;">
        <!-- left floated div column 1-->
        <div style="height: 150px; width: 250px; float: left; padding-bottom: 10px;margin-bottom:10px;margin-top:10px;">
            <asp:Label ID="Label4" runat="server" Text="Qualification Items:" Font-Bold="True"
                ForeColor="White"></asp:Label>
            <div style="">
                <ajx:ComboBox runat="server" ID="ComboBox4" DropDownStyle="DropDownList"  CssClass="drop-down-list"
                    AutoCompleteMode="SuggestAppend">
               <asp:ListItem Value="2">Sales Returns</asp:ListItem>
                    <asp:ListItem Value="0">Sales Only</asp:ListItem>
                    <asp:ListItem Value="1">Returns Only</asp:ListItem>
               </ajx:ComboBox>
            </div>
            <asp:Label ID="Label8" runat="server" Text="Items in Group:" Font-Bold="True" ForeColor="White"></asp:Label>
            <div style="">
                <asp:ListBox ID="ListBox1" runat="server" CssClass="list-item-normal">
                    <asp:ListItem>ABCKJHKJ</asp:ListItem>
                    <asp:ListItem>ABCKJHKJ</asp:ListItem>
                    <asp:ListItem>ABCKJHKJ</asp:ListItem>
                    <asp:ListItem>ABCKJHKJ</asp:ListItem>
                    <asp:ListItem>ABCKJHKJ</asp:ListItem>
                    <asp:ListItem>ABCKJHKJ</asp:ListItem>
                    <asp:ListItem>ABCKJHKJ</asp:ListItem>
                    <asp:ListItem>ABCKJHKJ</asp:ListItem>
                    <asp:ListItem>ABCKJHKJ</asp:ListItem>
                    <asp:ListItem>ABCKJHKJ</asp:ListItem>
                    <asp:ListItem>ABCKJHKJ</asp:ListItem>
                </asp:ListBox>
            </div>
        </div>
        <!-- end left floated div column 1-->
        <!-- right floated div column 2-->
        <div style="height: 153px; width: 250px; float: right; padding-bottom: 10px;margin-bottom:10px;margin-top:10px;">
            <asp:Label ID="Label5" runat="server" Text="Qualification Items:" Font-Bold="True"
                ForeColor="White"></asp:Label>
            <div style="">
                <ajx:ComboBox runat="server" ID="ComboBox3" DropDownStyle="DropDownList"  CssClass="drop-down-list"
                    AutoCompleteMode="SuggestAppend">
               <asp:ListItem Value="2">Sales Returns</asp:ListItem>
                    <asp:ListItem Value="0">Sales Only</asp:ListItem>
                    <asp:ListItem Value="1">Returns Only</asp:ListItem>
               </ajx:ComboBox>
            </div>
            <asp:Label ID="Label6" runat="server" Text="Items in Group:" Font-Bold="True" ForeColor="White"></asp:Label>
            <div style="">
                <asp:ListBox ID="ListBox2" runat="server" CssClass="list-item-normal">
                    <asp:ListItem>ABCKJHKJ</asp:ListItem>
                    <asp:ListItem>ABCKJHKJ</asp:ListItem>
                    <asp:ListItem>ABCKJHKJ</asp:ListItem>
                    <asp:ListItem>ABCKJHKJ</asp:ListItem>
                </asp:ListBox>
            </div>
        </div>
        <!-- end right floated div column 2-->

    </div>
    <!-- End 2nd row  -->
    <!-- 3rd row -->
    <div style="width: 600px;margin:auto;height:263px;">

        <!-- left floated div column 3-->
        <div style="height: 45px; width: 250px; float: left;margin-bottom:10px;margin-top:10px;">
            <asp:Label ID="Label7" runat="server" Text="Promotion No:" Font-Bold="True" ForeColor="White"></asp:Label>
            <div style="">
                <asp:TextBox ID="TextBox1" runat="server" CssClass="text-input-normal"></asp:TextBox>
            </div>
        </div>
        <!-- end left floated div column 3-->
        <!-- right floated div column 4-->
        <div style="height: 45px; width: 250px; float: right;margin-bottom:10px;margin-top:10px;">
            <asp:Label ID="Label9" runat="server" Text="Promotion Description:" Font-Bold="True"
                ForeColor="White"></asp:Label>
            <div style="">
                <asp:TextBox ID="TextBox2" runat="server" CssClass="text-input-normal"></asp:TextBox>
            </div>
        <!-- end right floated div column 4-->
        </div>


         <!-- left floated div column 5-->
        <div style="height: 45px; width: 250px; float: left;margin-bottom:10px;margin-top:10px;">
            <asp:Label ID="Label10" runat="server" Text="Promotion Type:" Font-Bold="True"
                ForeColor="White"></asp:Label>
            <div style="">
                <ajx:ComboBox runat="server" ID="ComboBox2" DropDownStyle="DropDownList"  CssClass="drop-down-list"
                    AutoCompleteMode="SuggestAppend">
               <asp:ListItem Value="2">Sales Returns</asp:ListItem>
                    <asp:ListItem Value="0">Sales Only</asp:ListItem>
                    <asp:ListItem Value="1">Returns Only</asp:ListItem>
               </ajx:ComboBox>
            </div>
        </div>
        <!-- end left floated div column 5-->
        <!-- right floated div column 6-->
        <div style="height: 45px; width: 250px; float: right;margin-bottom:10px;margin-top:10px;">
            <asp:Label ID="Label11" runat="server" Text="Promotion Status:" Font-Bold="True"
                ForeColor="White"></asp:Label>
            <div style="">
                <asp:CheckBox runat="server" ID="PromotionActiveCheckbox" Text="Active" Checked="true"
                    ForeColor="White" />
            </div>
        </div>
        <!-- end right floated div column 6-->
        <!-- left floated div column 7-->
        <div style="height: 45px; width: 250px; float: left;margin-bottom:10px;margin-top:10px;">
            <asp:Label ID="Label12" runat="server" Text="Qualification Type:" Font-Bold="True"
                ForeColor="White"></asp:Label>
            <div style="">
                <ajx:ComboBox runat="server" ID="ComboBox1" DropDownStyle="DropDownList"  CssClass="drop-down-list"
                    AutoCompleteMode="SuggestAppend">
               <asp:ListItem Value="2">Sales Returns</asp:ListItem>
                    <asp:ListItem Value="0">Sales Only</asp:ListItem>
                    <asp:ListItem Value="1">Returns Only</asp:ListItem>
               </ajx:ComboBox>
            </div>
        </div>
        <!-- end left floated div column 7-->
        <!-- right floated div column 8-->
        <div style="height: 45px; width: 250px; float: right;margin-bottom:10px;margin-top:10px;">
            <asp:Label ID="Label13" runat="server" Text="Promotion Trnsctn. Opt.:" Font-Bold="True"
                ForeColor="White"></asp:Label>
            <div style="">
               <ajx:ComboBox runat="server" ID="CmbTest" DropDownStyle="DropDownList"  CssClass="drop-down-list"
                    AutoCompleteMode="SuggestAppend">
               <asp:ListItem Value="2">Sales Returns</asp:ListItem>
                    <asp:ListItem Value="0">Sales Only</asp:ListItem>
                    <asp:ListItem Value="1">Returns Only</asp:ListItem>
               </ajx:ComboBox>
            </div>
        </div>
        <!-- end right floated div column 8-->
        <!-- left floated div column 9-->
        <div style="height: 45px; width: 250px; float: left;margin-bottom:10px;margin-top:10px;">
            <asp:Label ID="Label14" runat="server" Text="From Date:" Font-Bold="True"
                ForeColor="White"></asp:Label>
            <div style="">
                <asp:TextBox ID="TextBox5" runat="server" CssClass="text-input-normal"></asp:TextBox>
            </div>

        </div>
        <!-- end left floated div column 9-->
        <!-- right floated div column 9-->
        <div style="height: 45px; width: 250px; float: right;margin-bottom:10px;margin-top:10px;">
            <asp:Label ID="Label15" runat="server" Text="To Date:" Font-Bold="True" ForeColor="White"></asp:Label>
            <div style="">
                <asp:TextBox ID="TextBox6" runat="server" CssClass="text-input-normal" ></asp:TextBox>
            </div>
        </div>
        <!-- end right floated div column 9-->
    </div>
    <!-- end 3rd row -->
    <!--  4th row -->
    <div style="width: 600px; margin: auto;height:188px;">
        <div style="height: 45px; width: 250px; float: left; margin-bottom: 10px; margin-top: 10px;">
            <asp:Label ID="Label2" runat="server" Text="Promotion Options:" Font-Bold="True" ForeColor="White"></asp:Label>
            <div style="">
                <ajx:Accordion ID="Accordion1" CssClass="accordion" HeaderCssClass="accordionHeader"
                    HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent"
                    runat="server">
                    <Panes>
                        <ajx:AccordionPane runat="server">
                            <Header>
                                Payment Type:</Header>
                            <Content>
                                <ajx:ComboBox runat="server" ID="ComboBox5" DropDownStyle="DropDownList" CssClass="drop-down-list"
                                    AutoCompleteMode="SuggestAppend">
                                    <asp:ListItem Value="2">Sales Returns</asp:ListItem>
                                    <asp:ListItem Value="0">Sales Only</asp:ListItem>
                                    <asp:ListItem Value="1">Returns Only</asp:ListItem>
                                </ajx:ComboBox>
                            </Content>
                        </ajx:AccordionPane>
                        <ajx:AccordionPane ID="AccordionPane1" runat="server">
                            <Header>
                                Customer Name:</Header>
                            <Content>
                                <asp:ListBox ID="ListBox3" runat="server" CssClass="list-item-normal">
                                    <asp:ListItem>ABCKJHKJ</asp:ListItem>
                                    <asp:ListItem>ABCKJHKJ</asp:ListItem>
                                    <asp:ListItem>ABCKJHKJ</asp:ListItem>
                                    <asp:ListItem>ABCKJHKJ</asp:ListItem>
                                </asp:ListBox>
                            </Content>
                        </ajx:AccordionPane>
                        <ajx:AccordionPane ID="AccordionPane2" runat="server">
                            <Header>
                                Group Number:</Header>
                            <Content>
                                <ajx:ComboBox runat="server" ID="ComboBox6" DropDownStyle="DropDownList" CssClass="drop-down-list"
                                    AutoCompleteMode="SuggestAppend">
                                    <asp:ListItem Value="2">Sales Returns</asp:ListItem>
                                    <asp:ListItem Value="0">Sales Only</asp:ListItem>
                                    <asp:ListItem Value="1">Returns Only</asp:ListItem>
                                </ajx:ComboBox>
                            </Content>
                        </ajx:AccordionPane>
                    </Panes>
                </ajx:Accordion>
            </div>

        </div>

    </div>

    <!-- end 4th row -->
    <!-- 5th row -->
    <div style="width: 600px; margin: auto; height: 291px;">
        <!-- left floated div column 1-->
        <div style="height: 200px; width: 250px; float: left; margin-bottom: 10px; margin-top: 10px;">
            <asp:Label ID="Label1" runat="server" Text="Group:" Font-Bold="True" ForeColor="White"></asp:Label>
            <div style="">
                <asp:GridView ID="GridView1" runat="server">
                </asp:GridView>
            </div>
        </div>
        <!-- end left floated div column 1-->
    </div>
    <!-- end 5th row -->
</div>
<!-- End -->
</form>

我尝试了clear:both属性，但它无效。还有其他方法可以解决它。或者我错过了什么。？

Answer 1

尝试在Gridview上添加position:relative到手风琴。这样，当您的手风琴扩展时，Gridview将向下滑动。别忘了将容器/包装器的高度设置为100％

自动增加div标签的高度 - ASP.NET

1 个答案: