如何在asp.net中折叠div时防止页面调整大小

时间:2013-09-24 11:15:20

标签: jquery asp.net vb.net vb.net-2010

我正在使用以下jquery来折叠div:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

但是当我折叠div时,页面调整大小并且页面宽度增长

<span class="fr expand-collapse-text">Click to collapse</span>
<span style="display: none;" class="fr expand-collapse-text initial-expand">Click to expand</span>

这就是我正在崩溃的事情:

 <div class="content-module">
                <div class="content-module-heading cf">
                    <h3 class="fl">Table of content</h3>
                    <span class="fr expand-collapse-text">Click to collapse</span>
                    <span style="display: none;" class="fr expand-collapse-text initial-expand">Click to expand</span>
                </div> <!-- end content-module-heading -->
                <div class="content-module-main">
                     <asp:GridView ID="GridView1" runat="server" AllowPaging="True" 
    AutoGenerateColumns="False" 
    DataKeyNames="cnt_id" cssclass="table" Width="100%">
    <Columns>
            <asp:TemplateField>
              <HeaderTemplate>
                <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true" OnCheckedChanged="CheckUncheckAll" />
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox ID="CheckBox2" runat="server" /> 
            </ItemTemplate>
          </asp:TemplateField>

            <asp:TemplateField HeaderText="Date To Send">
                <EditItemTemplate> 
                    <asp:TextBox ID="cnt_date_to_send" runat="server" Text='<%# Bind("cnt_date_to_send") %>'></asp:TextBox>
                </EditItemTemplate> 
                <ItemTemplate> 
                    <asp:Label ID="lbcnt_date_to_send" runat="server" Text='<%# Bind("cnt_date_to_send") %>'></asp:Label> 
                </ItemTemplate> 
            </asp:TemplateField> 

               <asp:TemplateField HeaderText="Created">
                <EditItemTemplate> 
                    <asp:TextBox ID="created" runat="server" Text='<%# Bind("created") %>'></asp:TextBox>
                </EditItemTemplate> 
                <ItemTemplate> 
                    <asp:Label ID="lbcreated" runat="server" Text='<%# Bind("created") %>'></asp:Label> 
                </ItemTemplate> 
          </asp:TemplateField> 

              <asp:TemplateField HeaderText="Content">
                <EditItemTemplate>
                         <asp:TextBox ID="cnt_content" runat="server" Text='<%# Bind("cnt_content") %> ' CssClass="txtContent"/>
                </EditItemTemplate> 
                <ItemTemplate> 
                    <asp:Label ID="lblcnt_content" runat="server" Text='<%# Bind("cnt_content") %>' CssClass="txtContent"></asp:Label> 
                </ItemTemplate> 
                <ItemStyle wrap="true" Width="400px" />
            </asp:TemplateField> 

          <asp:TemplateField HeaderText="Edit">
                <ItemTemplate> 
                            <a href="#" class="table-actions-button ic-table-edit"></a>
                </ItemTemplate> 
            </asp:TemplateField> 

            <asp:TemplateField HeaderText="Delete">
                <ItemTemplate> 
                            <a href="#" class="table-actions-button ic-table-delete"></a>
                </ItemTemplate> 
            </asp:TemplateField> 


     </Columns>
</asp:GridView>
               </div>
            </div>

的CSS:

div.content-module-main { padding: 1em; /* 16/16 */ }
table { margin-bottom: 1.25em; /* 20/16 */ }

table th {
    background-color: #3D9DB3;
    color: white;
    text-transform: uppercase;
    padding: 1.25em 0 1.25em 1.25em; /* 15/12 */

}

table tbody td {
    padding: 0.833em 0 0.833em 1.25em; /* 10/12 15/12 */
    border-left: 1px solid white;
    border-right: 1px solid white;
    border-bottom: 1px solid #f8f9fa;
}

/* Alternate table row */
table tbody tr:nth-child(odd) { background-color: #f8f9fa; }

/* Push the first cell to the right so it doesn't stick to the table border */
table td:first-child, table th:first-child {
    width: 4em /* 48/12 */;
    text-align: center;
    padding: 0;
    border: none;
    border-bottom: 1px solid #f8f9fa;
}

table td:last-child, table th:last-child {
    width: 7em; /* 84/12 */
    text-align: center;
    padding: 0;
}

table td.table-footer {
    text-align: left;
    vertical-align: middle;
    padding-top: 1.25em /* 15/12 */;
    border: none;
}

    a.table-actions-button {
width: 1.25em;
height: 1.25em;
display: inline-block;
background-position: center center;
    }

我该如何解决这个问题?

我正在使用带有vb.net的asp.net

0 个答案:

没有答案