Databases
StackOverflow2013
Postsdbo
POIncrease height of div tag automatically - ASP.NET
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIncrease height of div tag automatically - ASP.NET
    text
    copied!<p>In my .net application I have an Accordion panel, below that I have a grid view. And the problem is when expanding the Accordion panel it's overlapping my grid view. This is my code:-</p> <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="VanSales.WebForm1" %&gt; &lt;%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajx" %&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt; &lt;head runat="server"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; .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; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;form id="form1" runat="server"&gt; &lt;ajx:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"&gt; &lt;/ajx:ToolkitScriptManager&gt; &lt;div style="background-image:url('Images/BackgroundDIV.gif');background-repeat:repeat-x;margin:auto;width:800px;height:1100px;"&gt; &lt;!-- 1st row --&gt; &lt;div style="width: 600px;margin:auto;height:140px;"&gt; &lt;!-- left floated div column 1--&gt; &lt;div style="height: 45px; width: 250px; float: left;margin-bottom:10px;margin-top:10px;"&gt; &lt;asp:Label ID="Label16" runat="server" Text="Group:" Font-Bold="True" ForeColor="White"&gt;&lt;/asp:Label&gt; &lt;div style=""&gt; &lt;ajx:ComboBox runat="server" ID="ComboBox7" DropDownStyle="DropDownList" CssClass="drop-down-list" AutoCompleteMode="SuggestAppend"&gt; &lt;asp:ListItem Value="2"&gt;Sales Returns&lt;/asp:ListItem&gt; &lt;asp:ListItem Value="0"&gt;Sales Only&lt;/asp:ListItem&gt; &lt;asp:ListItem Value="1"&gt;Returns Only&lt;/asp:ListItem&gt; &lt;/ajx:ComboBox&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- end left floated div column 1--&gt; &lt;!-- right floated div column 2--&gt; &lt;div style="height: 45px; width: 250px; float: right;margin-bottom:10px;margin-top:10px;"&gt; &lt;asp:Label ID="Label17" runat="server" Text="Company Name:" Font-Bold="True" ForeColor="White"&gt;&lt;/asp:Label&gt; &lt;div style=""&gt; &lt;asp:TextBox ID="TextBox3" runat="server" CssClass="text-input-normal" &gt;&lt;/asp:TextBox&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- end right floated div column 2--&gt; &lt;!-- left floated div column 3--&gt; &lt;div style="height: 45px; width: 250px; float: left;margin-bottom:10px;margin-top:10px;"&gt; &lt;asp:Label ID="Label18" runat="server" Text="Company:" Font-Bold="True" ForeColor="White"&gt;&lt;/asp:Label&gt; &lt;div style=""&gt; &lt;ajx:ComboBox runat="server" ID="ComboBox8" DropDownStyle="DropDownList" CssClass="drop-down-list" AutoCompleteMode="SuggestAppend"&gt; &lt;asp:ListItem Value="2"&gt;Sales Returns&lt;/asp:ListItem&gt; &lt;asp:ListItem Value="0"&gt;Sales Only&lt;/asp:ListItem&gt; &lt;asp:ListItem Value="1"&gt;Returns Only&lt;/asp:ListItem&gt; &lt;/ajx:ComboBox&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- end left floated div column 3--&gt; &lt;!-- right floated div column 4--&gt; &lt;div style="height: 45px; width: 250px; float: right;margin-bottom:10px;margin-top:10px;"&gt; &lt;asp:Label ID="Label19" runat="server" Text="Description:" Font-Bold="True" ForeColor="White"&gt;&lt;/asp:Label&gt; &lt;div style=""&gt; &lt;asp:TextBox ID="TextBox4" runat="server" CssClass="text-input-normal" &gt;&lt;/asp:TextBox&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- end right floated div column 4--&gt; &lt;/div&gt; &lt;!-- End 1st row --&gt; &lt;!-- 2nd row --&gt; &lt;div style="width: 600px;margin:auto;height:182px;"&gt; &lt;!-- left floated div column 1--&gt; &lt;div style="height: 150px; width: 250px; float: left; padding-bottom: 10px;margin-bottom:10px;margin-top:10px;"&gt; &lt;asp:Label ID="Label4" runat="server" Text="Qualification Items:" Font-Bold="True" ForeColor="White"&gt;&lt;/asp:Label&gt; &lt;div style=""&gt; &lt;ajx:ComboBox runat="server" ID="ComboBox4" DropDownStyle="DropDownList" CssClass="drop-down-list" AutoCompleteMode="SuggestAppend"&gt; &lt;asp:ListItem Value="2"&gt;Sales Returns&lt;/asp:ListItem&gt; &lt;asp:ListItem Value="0"&gt;Sales Only&lt;/asp:ListItem&gt; &lt;asp:ListItem Value="1"&gt;Returns Only&lt;/asp:ListItem&gt; &lt;/ajx:ComboBox&gt; &lt;/div&gt; &lt;asp:Label ID="Label8" runat="server" Text="Items in Group:" Font-Bold="True" ForeColor="White"&gt;&lt;/asp:Label&gt; &lt;div style=""&gt; &lt;asp:ListBox ID="ListBox1" runat="server" CssClass="list-item-normal"&gt; &lt;asp:ListItem&gt;ABCKJHKJ&lt;/asp:ListItem&gt; &lt;asp:ListItem&gt;ABCKJHKJ&lt;/asp:ListItem&gt; &lt;asp:ListItem&gt;ABCKJHKJ&lt;/asp:ListItem&gt; &lt;asp:ListItem&gt;ABCKJHKJ&lt;/asp:ListItem&gt; &lt;asp:ListItem&gt;ABCKJHKJ&lt;/asp:ListItem&gt; &lt;asp:ListItem&gt;ABCKJHKJ&lt;/asp:ListItem&gt; &lt;asp:ListItem&gt;ABCKJHKJ&lt;/asp:ListItem&gt; &lt;asp:ListItem&gt;ABCKJHKJ&lt;/asp:ListItem&gt; &lt;asp:ListItem&gt;ABCKJHKJ&lt;/asp:ListItem&gt; &lt;asp:ListItem&gt;ABCKJHKJ&lt;/asp:ListItem&gt; &lt;asp:ListItem&gt;ABCKJHKJ&lt;/asp:ListItem&gt; &lt;/asp:ListBox&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- end left floated div column 1--&gt; &lt;!-- right floated div column 2--&gt; &lt;div style="height: 153px; width: 250px; float: right; padding-bottom: 10px;margin-bottom:10px;margin-top:10px;"&gt; &lt;asp:Label ID="Label5" runat="server" Text="Qualification Items:" Font-Bold="True" ForeColor="White"&gt;&lt;/asp:Label&gt; &lt;div style=""&gt; &lt;ajx:ComboBox runat="server" ID="ComboBox3" DropDownStyle="DropDownList" CssClass="drop-down-list" AutoCompleteMode="SuggestAppend"&gt; &lt;asp:ListItem Value="2"&gt;Sales Returns&lt;/asp:ListItem&gt; &lt;asp:ListItem Value="0"&gt;Sales Only&lt;/asp:ListItem&gt; &lt;asp:ListItem Value="1"&gt;Returns Only&lt;/asp:ListItem&gt; &lt;/ajx:ComboBox&gt; &lt;/div&gt; &lt;asp:Label ID="Label6" runat="server" Text="Items in Group:" Font-Bold="True" ForeColor="White"&gt;&lt;/asp:Label&gt; &lt;div style=""&gt; &lt;asp:ListBox ID="ListBox2" runat="server" CssClass="list-item-normal"&gt; &lt;asp:ListItem&gt;ABCKJHKJ&lt;/asp:ListItem&gt; &lt;asp:ListItem&gt;ABCKJHKJ&lt;/asp:ListItem&gt; &lt;asp:ListItem&gt;ABCKJHKJ&lt;/asp:ListItem&gt; &lt;asp:ListItem&gt;ABCKJHKJ&lt;/asp:ListItem&gt; &lt;/asp:ListBox&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- end right floated div column 2--&gt; &lt;/div&gt; &lt;!-- End 2nd row --&gt; &lt;!-- 3rd row --&gt; &lt;div style="width: 600px;margin:auto;height:263px;"&gt; &lt;!-- left floated div column 3--&gt; &lt;div style="height: 45px; width: 250px; float: left;margin-bottom:10px;margin-top:10px;"&gt; &lt;asp:Label ID="Label7" runat="server" Text="Promotion No:" Font-Bold="True" ForeColor="White"&gt;&lt;/asp:Label&gt; &lt;div style=""&gt; &lt;asp:TextBox ID="TextBox1" runat="server" CssClass="text-input-normal"&gt;&lt;/asp:TextBox&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- end left floated div column 3--&gt; &lt;!-- right floated div column 4--&gt; &lt;div style="height: 45px; width: 250px; float: right;margin-bottom:10px;margin-top:10px;"&gt; &lt;asp:Label ID="Label9" runat="server" Text="Promotion Description:" Font-Bold="True" ForeColor="White"&gt;&lt;/asp:Label&gt; &lt;div style=""&gt; &lt;asp:TextBox ID="TextBox2" runat="server" CssClass="text-input-normal"&gt;&lt;/asp:TextBox&gt; &lt;/div&gt; &lt;!-- end right floated div column 4--&gt; &lt;/div&gt; &lt;!-- left floated div column 5--&gt; &lt;div style="height: 45px; width: 250px; float: left;margin-bottom:10px;margin-top:10px;"&gt; &lt;asp:Label ID="Label10" runat="server" Text="Promotion Type:" Font-Bold="True" ForeColor="White"&gt;&lt;/asp:Label&gt; &lt;div style=""&gt; &lt;ajx:ComboBox runat="server" ID="ComboBox2" DropDownStyle="DropDownList" CssClass="drop-down-list" AutoCompleteMode="SuggestAppend"&gt; &lt;asp:ListItem Value="2"&gt;Sales Returns&lt;/asp:ListItem&gt; &lt;asp:ListItem Value="0"&gt;Sales Only&lt;/asp:ListItem&gt; &lt;asp:ListItem Value="1"&gt;Returns Only&lt;/asp:ListItem&gt; &lt;/ajx:ComboBox&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- end left floated div column 5--&gt; &lt;!-- right floated div column 6--&gt; &lt;div style="height: 45px; width: 250px; float: right;margin-bottom:10px;margin-top:10px;"&gt; &lt;asp:Label ID="Label11" runat="server" Text="Promotion Status:" Font-Bold="True" ForeColor="White"&gt;&lt;/asp:Label&gt; &lt;div style=""&gt; &lt;asp:CheckBox runat="server" ID="PromotionActiveCheckbox" Text="Active" Checked="true" ForeColor="White" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- end right floated div column 6--&gt; &lt;!-- left floated div column 7--&gt; &lt;div style="height: 45px; width: 250px; float: left;margin-bottom:10px;margin-top:10px;"&gt; &lt;asp:Label ID="Label12" runat="server" Text="Qualification Type:" Font-Bold="True" ForeColor="White"&gt;&lt;/asp:Label&gt; &lt;div style=""&gt; &lt;ajx:ComboBox runat="server" ID="ComboBox1" DropDownStyle="DropDownList" CssClass="drop-down-list" AutoCompleteMode="SuggestAppend"&gt; &lt;asp:ListItem Value="2"&gt;Sales Returns&lt;/asp:ListItem&gt; &lt;asp:ListItem Value="0"&gt;Sales Only&lt;/asp:ListItem&gt; &lt;asp:ListItem Value="1"&gt;Returns Only&lt;/asp:ListItem&gt; &lt;/ajx:ComboBox&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- end left floated div column 7--&gt; &lt;!-- right floated div column 8--&gt; &lt;div style="height: 45px; width: 250px; float: right;margin-bottom:10px;margin-top:10px;"&gt; &lt;asp:Label ID="Label13" runat="server" Text="Promotion Trnsctn. Opt.:" Font-Bold="True" ForeColor="White"&gt;&lt;/asp:Label&gt; &lt;div style=""&gt; &lt;ajx:ComboBox runat="server" ID="CmbTest" DropDownStyle="DropDownList" CssClass="drop-down-list" AutoCompleteMode="SuggestAppend"&gt; &lt;asp:ListItem Value="2"&gt;Sales Returns&lt;/asp:ListItem&gt; &lt;asp:ListItem Value="0"&gt;Sales Only&lt;/asp:ListItem&gt; &lt;asp:ListItem Value="1"&gt;Returns Only&lt;/asp:ListItem&gt; &lt;/ajx:ComboBox&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- end right floated div column 8--&gt; &lt;!-- left floated div column 9--&gt; &lt;div style="height: 45px; width: 250px; float: left;margin-bottom:10px;margin-top:10px;"&gt; &lt;asp:Label ID="Label14" runat="server" Text="From Date:" Font-Bold="True" ForeColor="White"&gt;&lt;/asp:Label&gt; &lt;div style=""&gt; &lt;asp:TextBox ID="TextBox5" runat="server" CssClass="text-input-normal"&gt;&lt;/asp:TextBox&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- end left floated div column 9--&gt; &lt;!-- right floated div column 9--&gt; &lt;div style="height: 45px; width: 250px; float: right;margin-bottom:10px;margin-top:10px;"&gt; &lt;asp:Label ID="Label15" runat="server" Text="To Date:" Font-Bold="True" ForeColor="White"&gt;&lt;/asp:Label&gt; &lt;div style=""&gt; &lt;asp:TextBox ID="TextBox6" runat="server" CssClass="text-input-normal" &gt;&lt;/asp:TextBox&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- end right floated div column 9--&gt; &lt;/div&gt; &lt;!-- end 3rd row --&gt; &lt;!-- 4th row --&gt; &lt;div style="width: 600px; margin: auto;height:188px;"&gt; &lt;div style="height: 45px; width: 250px; float: left; margin-bottom: 10px; margin-top: 10px;"&gt; &lt;asp:Label ID="Label2" runat="server" Text="Promotion Options:" Font-Bold="True" ForeColor="White"&gt;&lt;/asp:Label&gt; &lt;div style=""&gt; &lt;ajx:Accordion ID="Accordion1" CssClass="accordion" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent" runat="server"&gt; &lt;Panes&gt; &lt;ajx:AccordionPane runat="server"&gt; &lt;Header&gt; Payment Type:&lt;/Header&gt; &lt;Content&gt; &lt;ajx:ComboBox runat="server" ID="ComboBox5" DropDownStyle="DropDownList" CssClass="drop-down-list" AutoCompleteMode="SuggestAppend"&gt; &lt;asp:ListItem Value="2"&gt;Sales Returns&lt;/asp:ListItem&gt; &lt;asp:ListItem Value="0"&gt;Sales Only&lt;/asp:ListItem&gt; &lt;asp:ListItem Value="1"&gt;Returns Only&lt;/asp:ListItem&gt; &lt;/ajx:ComboBox&gt; &lt;/Content&gt; &lt;/ajx:AccordionPane&gt; &lt;ajx:AccordionPane ID="AccordionPane1" runat="server"&gt; &lt;Header&gt; Customer Name:&lt;/Header&gt; &lt;Content&gt; &lt;asp:ListBox ID="ListBox3" runat="server" CssClass="list-item-normal"&gt; &lt;asp:ListItem&gt;ABCKJHKJ&lt;/asp:ListItem&gt; &lt;asp:ListItem&gt;ABCKJHKJ&lt;/asp:ListItem&gt; &lt;asp:ListItem&gt;ABCKJHKJ&lt;/asp:ListItem&gt; &lt;asp:ListItem&gt;ABCKJHKJ&lt;/asp:ListItem&gt; &lt;/asp:ListBox&gt; &lt;/Content&gt; &lt;/ajx:AccordionPane&gt; &lt;ajx:AccordionPane ID="AccordionPane2" runat="server"&gt; &lt;Header&gt; Group Number:&lt;/Header&gt; &lt;Content&gt; &lt;ajx:ComboBox runat="server" ID="ComboBox6" DropDownStyle="DropDownList" CssClass="drop-down-list" AutoCompleteMode="SuggestAppend"&gt; &lt;asp:ListItem Value="2"&gt;Sales Returns&lt;/asp:ListItem&gt; &lt;asp:ListItem Value="0"&gt;Sales Only&lt;/asp:ListItem&gt; &lt;asp:ListItem Value="1"&gt;Returns Only&lt;/asp:ListItem&gt; &lt;/ajx:ComboBox&gt; &lt;/Content&gt; &lt;/ajx:AccordionPane&gt; &lt;/Panes&gt; &lt;/ajx:Accordion&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- end 4th row --&gt; &lt;!-- 5th row --&gt; &lt;div style="width: 600px; margin: auto; height: 291px;"&gt; &lt;!-- left floated div column 1--&gt; &lt;div style="height: 200px; width: 250px; float: left; margin-bottom: 10px; margin-top: 10px;"&gt; &lt;asp:Label ID="Label1" runat="server" Text="Group:" Font-Bold="True" ForeColor="White"&gt;&lt;/asp:Label&gt; &lt;div style=""&gt; &lt;asp:GridView ID="GridView1" runat="server"&gt; &lt;/asp:GridView&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- end left floated div column 1--&gt; &lt;/div&gt; &lt;!-- end 5th row --&gt; &lt;/div&gt; &lt;!-- End --&gt; &lt;/form&gt; </code></pre> <p> </p> <p>I have tried the <code>clear:both</code> property but it's not working. There is any other way to resolve It .? or I missed something .? </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload