Page Div align not showing correctly - asp.net

I have a weird situation and believe that it must be easy for people to help me out on this specific issue. I have two divs on a child page that i want to show next to each other. I mean, One on left and one on right. After that, on the bottom of the screen I want to display a table that covers 100% width.
I have used float left on one div and float right on another div. Then i show the heading of the table on the bottom, then the table displays.
My problem is that the despite all my efforts the heading is displaying in between these two divs. Here is my code.
<div id="ContainerDiv" runat="server" style="width: 930px">
<div id="DivticketDetails" runat="server" visible="false"
style="float: left; width: 400px;">
<asp:Panel ID="PanelTicketDetails" runat="server" BackColor="#8B9FBE">
<h3 style="color: #FFFFFF; font-weight: bold; text-decoration: underline;">
Bowzer Details</h3>
<table border="1" cellpadding="0" cellspacing="0" class="myTable">
<tr>
<td bgcolor="#507CD1">
<asp:Label ID="Label6" runat="server" Text="Field / Customer Name" Font-Bold="True"
Font-Size="XX-Small" BorderColor="#507CD1" ForeColor="White"></asp:Label>
</td>
<td>
<asp:Label ID="lbl_FieldName" runat="server" Text="lbl_FieldName" CssClass="myLabel"></asp:Label>
</td>
</tr>
<tr>
<td bgcolor="#507CD1">
<asp:Label ID="Label3" runat="server" Text="Challan Generated On" Font-Bold="True"
Font-Size="XX-Small" BorderColor="#507CD1" ForeColor="White"></asp:Label>
</td>
<td>
<asp:Label ID="lbl_firstEntryDate" runat="server" Text="lbl_firstEntryDate" Font-Size="Small"
CssClass="myLabel"></asp:Label>
</td>
</tr>
<tr>
<td bgcolor="#507CD1">
<asp:Label ID="Label4" runat="server" Text="Product Name" Font-Bold="True" Font-Size="XX-Small"
BorderColor="#507CD1" ForeColor="White"></asp:Label>
</td>
<td>
<asp:Label ID="lbl_ProductName" runat="server" Text="lbl_ProductName" Font-Size="Small"
CssClass="myLabel"></asp:Label>
</td>
</tr>
<tr>
<td bgcolor="#507CD1">
<asp:Label ID="Label2" runat="server" Text="Bowzer No" Font-Bold="True" Font-Size="XX-Small"
BorderColor="#507CD1" ForeColor="White"></asp:Label>
</td>
<td>
<asp:Label ID="lbl_bowzerNo" runat="server" Text="lbl_bowzerNo" Font-Size="Small"
CssClass="myLabel"></asp:Label>
</td>
</tr>
<tr>
<td bgcolor="#507CD1">
<asp:Label ID="Label28" runat="server" Text="Quantity" Font-Bold="True" Font-Size="XX-Small"
BorderColor="#507CD1" ForeColor="White"></asp:Label>
</td>
<td>
<asp:Label ID="lbl_BowQuantity" runat="server" Text="lbl_BowQuantity" Font-Size="Small"
CssClass="myLabel"></asp:Label>
</td>
</tr>
</table>
</asp:Panel>
</div>
<div id="Div2" runat="server" style="float: right; width: 429px;">
<asp:Panel ID="PanelBowzerHistory" runat="server" BackColor="#8B9FBE" Visible="False">
<h3 style="font-weight: bold; text-decoration: underline; color: #FFFFFF">
Bowzer History
</h3>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
DataKeyNames="challan_id" DataSourceID="DSBowzerHistory" Font-Size="Smaller"
ForeColor="#333333" GridLines="None" AllowPaging="True" PageSize="4">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="FirstWeight" HeaderText="FirstWeight" SortExpression="FirstWeight" />
<asp:BoundField DataField="Firstentry_date" HeaderText="Firstentry_date" SortExpression="Firstentry_date" />
<asp:BoundField DataField="SecondWeight" HeaderText="SecondWeight" SortExpression="SecondWeight" />
<asp:BoundField DataField="netWeight" HeaderText="netWeight" SortExpression="netWeight" />
<asp:BoundField DataField="SecondEntry_Date" HeaderText="SecondEntry_Date" SortExpression="SecondEntry_Date" />
<asp:BoundField DataField="challan_id" HeaderText="challan_id" InsertVisible="False"
ReadOnly="True" SortExpression="challan_id" />
</Columns>
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" ForeColor="White" Font-Bold="True" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#6D95E1" />
<SortedDescendingCellStyle BackColor="#E9EBEF" />
<SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>
</asp:Panel>
</div>
</div>
<div id="tblDetailsDiv" runat="server" visible="False" title="Ticket Details" style="width: 930px;
background-color: #8B9FBE;">
<h3 style="font-size: medium; color: #FFFFFF; font-weight: bold; width: 930px; background-color: #00FF00;">
Enter Details Here</h3>
<table id="tblDetails" title="Enter Details" border="0" cellpadding="0" cellspacing="0"
class="myTable" frame="border">
<tr>
<td>
</td>
<td>
</table>
</div>
and here is how it is displayed.

Try to change the float of second div to left, and after those two div.
Like this:
And add a new div with a clear style after those two divs.
Hope it works.
here u go. i added the code above

Related

Dropdown List issue in ASP Panel control

I am using asp Panel control in which I have a dropdown list for different Timezones to select.
However, When I select any timezone It disappears when I open the pop up next time.
Can you please suggest or provide some pointers ?
<asp:PlaceHolder ID="DisplayMode" runat="server">
<div id="ListBranch" style="text-align: left">
<asp:Button ID="AddBranch" runat="server" Text="Add Branch" OnClick="AddBranch_Click" />
<act:ModalPopupExtender ID="ModalPopupExtenderBranch" runat="server" TargetControlID="AddBranch" PopupControlID="pnlAddBranch"
CancelControlID="btnCancel" BackgroundCssClass="modalBackground">
</act:ModalPopupExtender>
<act:ToolkitScriptManager ID="smBranch" runat="server">
</act:ToolkitScriptManager>
<div>
<br />
<asp:GridView runat="server" ID="gvBranchList" DataKeyNames="BranchID" AutoGenerateColumns="false" Font-Size="Small">
<RowStyle BackColor="#EFF3FB" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#336699" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="Branch Name" HeaderText="Branch Name" />
<asp:BoundField DataField="Timezone" HeaderText="Timezone" />
<asp:TemplateField HeaderText="Edit">
<ItemTemplate>
<asp:Button ID="Edit" runat="server" Text="Edit" OnClick="Edit_Click" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br />
<asp:Label ID="lblresult" runat="server" />
<asp:Button ID="btnShowPopup" runat="server" Style="display: none" />
<asp:Button ID="UpdateBranch" CommandName="Update" runat="server" Text="Ok" OnClick="Ok_Click" Style="display: none" />
<asp:Panel ID="pnlAddBranch" runat="server" BackColor="White" Height="80%" Width="100%" Font-Size="Small" Style="top: 40px !important;">
<table style="border: solid 2px #336699; width: 100%; height: 100%; font-size: small;" cellpadding="0" cellspacing="0">
<tr style="background-color: #336699">
<td colspan="2" style="height: 5%; color: White; font-weight: bold; font-size: larger" align="center">Branch Details</td>
</tr>
<tr>
<td align="left">Branch Name: </td>
<td>
<asp:TextBox ID="BranchName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="left">Timezone: </td>
<td>
<asp:DropDownList ID="ddlTimezones" AutoPostBack="false" OnSelectedIndexChanged="ddlTimezones_SelectedIndexChanged" runat="server" />
</td>
</tr>
<tr>
<td align="left">Assigned Holidays: </td>
<td>
<asp:CheckBoxList ID="chkAssignedHolidays" runat="server" RepeatColumns="3" Font-Size="Small" />
</td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="Ok" CommandName="Add" runat="server" Text="Ok" OnClick="Ok_Click" />
<asp:Button ID="Cancel" Commandname="Cancel" runat="server" Text="Cancel" OnClick="Cancel_Click" />
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="lblBranchID" runat="server" Style="display: none"></asp:Label>
</td>
</tr>
</table>
</asp:Panel>
</div>
</div>
</asp:PlaceHolder>

Required Field Validators disappear in an update panel

I have an Update Panel which contains a GridView. 3 TextBoxes and a DropDownList control are Validated. I also have 3 different DDLs and 3 Checkbox controls in the panel that each trigger a rebind of the Gridview. When one of the un-validated DDLs or Checkboxes is changed they all fire the same changed event and I lose all of the Validation on the TextBoxes and the 1 DDL.
I'm a bit confused as to whether I should be setting Initial values on the validated or un-validated controls, if I should "group" the validation, and which set of controls needs to have the CausesValidation flag set. I hate to spam with massive amounts of code, but considering how much there is in this update panel....
<asp:UpdatePanel ID="UpdatePanel_Search" runat="server" >
<ContentTemplate>
<table class="auto-style2">
<tr>
<td>
<table class="auto-style1">
<tr>
<td class="auto-style3">
<div>
<table class="auto-style1" border="1px" frame="void">
<tr>
<td bgcolor="#00198D" style="text-align: center" class="auto-style19">
<asp:Label ID="FilterLabel3" runat="server" ForeColor="White" Text="Used by OEM"></asp:Label>
</td>
<td bgcolor="#00198D" style="text-align: center" class="auto-style9">
<asp:Label ID="FilterLabel4" runat="server" ForeColor="White" Text="Item Type"></asp:Label>
</td>
<td bgcolor="#00198D" style="text-align: center" class="auto-style24">
<asp:Label ID="FilterLabel5" runat="server" ForeColor="White" Text="Group Type"></asp:Label>
</td>
<td bgcolor="#00198D" style="text-align: center" class="auto-style12">
<asp:Label ID="FilterLabel6" runat="server" ForeColor="White" Text="Part Active"></asp:Label>
</td>
<td bgcolor="#00198D" style="text-align: center" class="auto-style17">
<asp:Label ID="FilterLabel7" runat="server" ForeColor="White" Text="Non-Inventory Part"></asp:Label>
</td>
<td bgcolor="#00198D" style="text-align: center" class="auto-style7">
<asp:Label ID="FilterLabel8" runat="server" ForeColor="White" Text="Part In Stock"></asp:Label>
</td>
</tr>
<tr>
<td class="auto-style19">
<asp:DropDownList ID="DDL_OEM" runat="server" Height="27px" Width="150px" AutoPostBack="True" AppendDataBoundItems="True" OnSelectedIndexChanged="Filter_DataSet" ></asp:DropDownList>
</td>
<td class="auto-style9">
<asp:DropDownList ID="DDL_ItemTypes" runat="server" Height="27px" Width="150px" AutoPostBack="True" AppendDataBoundItems="True" OnSelectedIndexChanged="Filter_DataSet" ></asp:DropDownList>
</td>
<td class="auto-style9">
<asp:DropDownList ID="DDL_GroupTypes" runat="server" Height="27px" Width="150px" AutoPostBack="True" AppendDataBoundItems="True" OnSelectedIndexChanged="Filter_DataSet" ></asp:DropDownList>
</td>
<td class="auto-style12">
<asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="True" OnCheckedChanged="Filter_DataSet" Checked="True" Style="text-align: center" />
</td>
<td class="auto-style17">
<asp:CheckBox ID="CheckBox2" runat="server" AutoPostBack="True" OnCheckedChanged="Filter_DataSet" Style="text-align: center" />
</td>
<td class="auto-style7">
<asp:CheckBox ID="CheckBox3" runat="server" AutoPostBack="True" OnCheckedChanged="Filter_DataSet" Style="text-align: center" />
</td>
</tr>
</table>
<div>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server"
ControlToValidate="TextBox_Ticket_Search"
ErrorMessage="Ticket Number is Required. Enter NOTICKET if the item you are requesting is for your tech stock(i.e. a tool, USB drive, etc.)"
ForeColor="Red">
</asp:RequiredFieldValidator>
</div>
<div>
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server"
ControlToValidate="TextBox_Part_Search"
ErrorMessage="Part Number is Required. Select a Part from the Catalog before submitting a request."
ForeColor="Red">
</asp:RequiredFieldValidator>
</div>
<div>
<asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server"
ControlToValidate="TextBox_Serial_Search"
ErrorMessage="System Serial Number is Required. Enter NOSERIAL if the item you are requesting is for your tech stock(i.e. a tool, USB drive, etc.)"
ForeColor="Red">
</asp:RequiredFieldValidator>
</div>
<div>
<asp:RequiredFieldValidator ID="RequiredFieldValidator11" runat="server"
ControlToValidate="DDL_OEM_submit0"
ErrorMessage="System Model is a required field. Please select a Model from the Drop Down below."
InitialValue="0"
ForeColor="Red">
</asp:RequiredFieldValidator>
</div>
</td>
</tr>
<table class="auto-style1">
<tr>
<td class="auto-style34">
<table class="auto-style1">
<tr>
<td>
<asp:Label ID="Label_Comments_Search" runat="server" Text="Comments:"></asp:Label>
</td>
</tr>
<tr>
<td style="text-align: left">
<asp:TextBox runat="server"
ID="TextBox_Comments_Search"
TextMode="multiline"
TextWrapping="Wrap"
AcceptsReturn="True"
VerticalScrollBarVisibility="Visible" Height="100px" Width="300px">
</asp:TextBox>
</td>
</tr>
</table>
</td>
<td class="auto-style29">
<table class="auto-style1">
<tr>
<td class="auto-style4">
<asp:Label ID="Label_Ticket_Search" runat="server" Text="Ticket #:"></asp:Label>
</td>
<td class="auto-style32">
<asp:TextBox ID="TextBox_Ticket_Search" runat="server"></asp:TextBox>
<span class="auto-style23">*</span></td>
</td>
</tr>
<tr>
<td style="text-align: right">
<asp:Label ID="Label_Part_Search" runat="server" Text="Part #:"></asp:Label>
</td>
<td class="auto-style32">
<asp:TextBox ID="TextBox_Part_Search" runat="server" ReadOnly="true" BackColor="#CCCCCC"></asp:TextBox>
<span class="auto-style23">*</span>
</td>
</tr>
<tr>
<td style="text-align: right" class="auto-style21">
<asp:Label ID="Label12" runat="server" Text="Serial #:"></asp:Label></td>
<td class="auto-style32">
<asp:TextBox ID="TextBox_Serial_Search" runat="server"></asp:TextBox>
<span class="auto-style23">*</span></td>
</tr>
<tr>
<td style="text-align: right" class="auto-style21">
<asp:Label ID="Label_Damage_Search" runat="server" Text="Part Damaged:"></asp:Label>
</td>
<td style="text-align: left" class="auto-style31">
<asp:CheckBox ID="CheckBox_Damage_Search" runat="server"></asp:CheckBox>
</td>
</tr>
</table>
</td>
<td>
<table class="auto-style25">
<tr>
<td>
<table class="auto-style25">
<tr>
<td>
<asp:Label ID="Label15" runat="server" Style="text-align: left" Text="Model:"></asp:Label>
</td>
<td align="left">
<asp:DropDownList ID="DDL_OEM_submit0" runat="server">
</asp:DropDownList>
<span class="auto-style23">*</span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<asp:Button ID="Button2" runat="server" Text="Submit Part Request" OnClick="Button2_Click" />
</td>
</tr>
</table>
</td>
<table class="auto-style1">
<tr>
<td>
<table class="auto-style1">
<tr>
<td class="auto-style8" valign="top">
<asp:GridView ID="GridView1"
runat="server"
AutoGenerateColumns="False"
DataKeyNames="ID"
DataSourceID="SqlDataSource1"
EnableModelValidation="True"
AllowSorting="True"
OnSelectedIndexChanged="Gridview1_SelectedIndexChanged"
AutoGenerateSelectButton="True"
BackColor="White"
BorderColor="#999999"
BorderStyle="None"
BorderWidth="1px"
CellPadding="3"
GridLines="Vertical" HorizontalAlign="Justify">
<FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
<HeaderStyle BackColor="#00198D" ForeColor="White" />
<PagerStyle ForeColor="Black" BackColor="#999999" HorizontalAlign="Center" />
<AlternatingRowStyle BackColor="#DCDCDC" />
<EmptyDataTemplate>
No records could be retrieved from the database. We apologize for the inconvenience.
</EmptyDataTemplate>
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" ReadOnly="True" SortExpression="ID" />
<asp:BoundField DataField="OEMPartCode" HeaderText="OEMPartCode" SortExpression="OEMPartCode" />
<asp:BoundField DataField="OEM" HeaderText="OEM" InsertVisible="False" ReadOnly="True" SortExpression="OEM" />
<asp:BoundField DataField="Sub Categories" HeaderText="Models" InsertVisible="False" ReadOnly="True" SortExpression="Sub Categories" />
</Columns>
<RowStyle BackColor="#EEEEEE" ForeColor="Black" />
<SelectedRowStyle BackColor="Red" Font-Bold="True" ForeColor="White" />
</asp:GridView>
</td>
<td style="text-align: left" valign="top">
<asp:DetailsView
ID="DetailsView1"
runat="server"
DataSourceID="SqlDataSource2"
Height="50px"
Width="556px"
CellPadding="4"
AutoGenerateRows="False"
OnDataBound="DetailsView1_OnDataBound"
ForeColor="White"
EnableModelValidation="True"
DataKeyNames="ID"
HorizontalAlign="Left"
Style="margin-right: 0px">
<FieldHeaderStyle BackColor="#00198D" Font-Bold="True" ForeColor="White" />
<Fields>
<asp:BoundField DataField="ID" HeaderText="ID" />
<asp:BoundField DataField="OEMPartCode" HeaderText="OEMPartCode" />
<asp:BoundField DataField="PartCode2" HeaderText="PartCode2" />
<asp:TemplateField HeaderText="UsedByOEM">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("UsedByOEM") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="ItemType">
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("JoinedItemType") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="GroupType">
<ItemTemplate>
<asp:Label ID="Label3" runat="server" Text='<%# Bind("JoinedGroupType") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="PartDesc" HeaderText="PartDescription" SortExpression="PartDesc" />
<asp:BoundField DataField="PartComment" HeaderText="PartComment" SortExpression="PartComment" />
<asp:BoundField DataField="PartCount" HeaderText="PartCount" SortExpression="PartCount" />
<asp:BoundField DataField="PartMin" HeaderText="PartMin" SortExpression="PartMin" />
<asp:CheckBoxField DataField="PartActive" HeaderText="PartActive" SortExpression="PartActive" />
<asp:BoundField DataField="MFRPartNumber" HeaderText="MFRPartNumber" SortExpression="MFRPartNumber" />
<asp:BoundField DataField="PartCapacity" HeaderText="PartCapacity" SortExpression="PartCapacity" />
<asp:CheckBoxField DataField="PreTurnRequired" HeaderText="PreTurnRequired" SortExpression="PreTurnRequired" />
<asp:TemplateField HeaderText="AssemblyPart">
<ItemTemplate>
<asp:Label ID="Label_AssemblyPart" runat="server" Text='<%# Bind("AssemblyPart") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Part Image">
<ItemTemplate>
<a href="javascript:void(window.open('<%# "ShowImage.aspx?PID="+ Eval("PartImage")%>','_blank','toolbar=no,menubar=no'))">
<asp:Image ID="FullImage" ToolTip="Click to download the full size image."
runat="server" ImageUrl='<%# "ShowThumb.aspx?size=120&PID="+ Eval("PartImage") %>' /></a>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Part Image 2">
<ItemTemplate>
<a href="javascript:void(window.open('<%# "ShowImage.aspx?PID="+ Eval("PartImage2")%>','_blank','toolbar=no,menubar=no'))">
<asp:Image ID="Image1" ToolTip="Click to download the full size image."
runat="server" ImageUrl='<%# "ShowThumb.aspx?size=120&PID="+ Eval("PartImage2") %>' /></a>
</ItemTemplate>
</asp:TemplateField>
<asp:CheckBoxField DataField="NonInventoryPart" HeaderText="NonInventoryPart" SortExpression="NonInventoryPart" />
<asp:TemplateField HeaderText="Updated By">
<ItemTemplate>
<asp:Label ID="UserNameLabel" runat="server" Text='<%# Bind("CreatedByUser") %>' ReadOnly="True"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Last Modified">
<ItemTemplate>
<asp:Label ID="ModifiedDateLabel" runat="server" Text='<%# Bind("LastModifiedDate") %>' ReadOnly="True"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Fields>
<FooterStyle BackColor="#00198D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#00198D" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="White" ForeColor="Black" Width="300px" />
</asp:DetailsView>
</td>
</tr>
</table>
</td>
</tr>
</table>
</table>
</td>
</tr>
</table>
</table>
</td>
</tr>
</table>
</table>
</td>
</tr>
</table>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
DataSourceMode="DataSet"
SelectCommand="SELECT Stuff">
<FilterParameters>
<asp:ControlParameter Name="UsedByOEM" ControlID="DDL_OEM" PropertyName="SelectedValue" />
<asp:ControlParameter Name="ItemType" ControlID="DDL_ItemTypes" PropertyName="SelectedValue" />
<asp:ControlParameter Name="GroupType" ControlID="DDL_GroupTypes" PropertyName="SelectedValue" />
</FilterParameters>
</asp:SqlDataSource>
<a></a>
<asp:SqlDataSource ID="SqlDataSource2" runat="server"
ConflictDetection="CompareAllValues"
SelectCommand="SELECT Stuff">
<SelectParameters>
<asp:ControlParameter ControlID="GridView1" Name="ID" PropertyName="SelectedValue" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
Did you try giving the controls a group name?

Asp .net Show modal popup on click event linkbutton which is on Modal popup

I shown Modal popup (Modal2) on this Modal popup I have grid contain link button.
on click event of link button i have to show another modal popup having grid.
My First Modal popup Showing
<asp:Button ID="btnScholershipApp" runat="server" Text="Button" SkinID="SelectButton" />
<Ajax:ModalPopupExtender ID="Modal2" runat="server" PopupControlID="table2" CancelControlID="img1"
TargetControlID="btnScholershipApp" OnCancelScript="javascript:__doPostBack('clearfields2')">
</Ajax:ModalPopupExtender>
First Modal popup
<table id="table2" runat="server" border="0" cellpadding="0" cellspacing="0" height="100%"
style="border-collapse: collapse; height: auto; margin: 0px; padding: 0px; display: none;"
width="1000" class="popupheading">
<tr>
<td>
<div style="width: 1000px; height: auto;">
<div style="width: 1000px; height: 40px; background-image: url('../../../PopU/top.png');
background-repeat: no-repeat;">
<img id="img1" runat="server" height="40" src="~/Images/close1.png" style="float: right;"
width="40" />
</div>
<div style="width: 980px; height: auto; min-height: 100px; background-image: url('../../../PopU/center_bg.png');
background-repeat: repeat-y; padding: 0 10px 0 10px;">
<asp:Panel ID="modal_panel2" runat="server" Height="550" Width="980">
<table cellpadding="7px" cellspacing="7px" width="100%">
<tr>
<td>
<fieldset>
<legend class="legend">Search </legend>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<asp:Label ID="Label5" runat="server" Text="Student Name"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtSAStudentName" runat="server"></asp:TextBox>
</td>
<td>
<asp:Label ID="Label6" runat="server" Text="Student ID"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtSAStudentID" runat="server"></asp:TextBox>
</td>
<td>
<asp:Label ID="Label4" runat="server" Text="Scholership Name"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtSAScholershipName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label7" runat="server" Text="University PRN"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtSAScholershipPRN" runat="server"></asp:TextBox>
</td>
<td>
<asp:Label ID="Label12" runat="server" Text="Date Of Birth"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtSADateOfBirth" runat="server"></asp:TextBox>
<ajaxtoolkit:CalendarExtender ID="CalendarExtender1" runat="server" Enabled="True"
TargetControlID="txtSADateOfBirth">
</ajaxtoolkit:CalendarExtender>
</td>
</tr>
</table>
</fieldset>
</td>
</tr>
</table>
<table width="100%">
<tr style="background-color: #F6F0DB;">
<td align="center" colspan="4">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:HiddenField ID="hfScholershipName" runat="server" />
<asp:HiddenField ID="hfScholershipPRN" runat="server" />
<asp:HiddenField ID="hfScholershipApplicationID" runat="server" />
<asp:HiddenField ID="hfScholershipDocumentID" runat="server" />
<asp:GridView ID="grdScholershipApp" runat="server" AutoGenerateColumns="false" AllowPaging="True"
OnPageIndexChanging="grdScholershipApp_PageIndexChanging" PageSize="10" Width="970px">
<Columns>
<asp:BoundField DataField="StudentId" HeaderText="Student ID" />
<asp:BoundField DataField="FullName" HeaderText="Student Name">
<ItemStyle HorizontalAlign="Center" Width="250" />
</asp:BoundField>
<asp:BoundField DataField="ScholershipPRN" HeaderText="University PRN" />
<asp:BoundField DataField="DateOfBirth" HeaderText="Date of birth" />
<asp:BoundField DataField="ScholershipName" HeaderText="Scholership Name" />
<asp:TemplateField HeaderText="Options">
<ItemTemplate>
<asp:UpdatePanel ID="pnlup2" runat="server">
<Triggers>
<asp:PostBackTrigger ControlID="btnEditStudentApplication" />
</Triggers>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnStudentDocumentIDShow" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:ImageButton ID="btnEditStudentApplication" runat="server" CommandArgument='<%#Eval("PanomtechServiceID")+";"+Eval("StudentID")+";"+Eval("ScholershipPRN")+";"+Eval("ScholershipName")%>'
SkinID="Select" OnClick="btnEditStudentApplication_Click" />
<%--<asp:Panel ID="Panel12" runat="server" >
<asp:UpdatePanel ID="UpdatePanel4" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="hfbtnStudentDocumentIDShow" runat="server" Style="display: none;" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="hfbtnStudentDocumentIDShow" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</asp:Panel>--%>
<asp:LinkButton ID="btnStudentDocumentIDShow" runat="server" Text="Documents" CommandArgument='<%#Eval("PanomtechServiceID")+";"+Eval("StudentID")+";"+Eval("StudentDocumentID")%>'
OkControlID="hfbtnStudentDocumentIDShow" />
<%-- OnClick="hfbtnStudentDocumentIDShow_Click" --%>
<%--<Ajax:ModalPopupExtender ID="modal4" runat="server" PopupControlID="table4" CancelControlID="img3"
TargetControlID="btnStudentDocumentIDShow" OnCancelScript="javascript:__doPostBack('clearfields4')">
</Ajax:ModalPopupExtender>--%>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
no data.......
</EmptyDataTemplate>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
</asp:Panel>
</div>
<div style="width: 1000px; height: 40px; background-image: url('../../../PopU/bottom.png');
background-repeat: no-repeat;">
</div>
</div>
</td>
</tr>
</table>
<Ajax:AnimationExtender ID="AnimationExtender2" runat="server" TargetControlID="btnScholershipApp">
<Animations>
<OnClick>
<Parallel AnimationTarget="table2"
Duration=".9" Fps="50">
<FadeIn Duration=".9"/>
</Parallel>
</OnClick>
</Animations>
</Ajax:AnimationExtender>
LinkButton Event
protected void hfbtnStudentDocumentIDShow_Click(object sender, EventArgs e)
{
modal4.Show();
}
Second Modal popup
<table id="table4" runat="server" border="0" cellpadding="0" cellspacing="0" height="100%"
style="border-collapse: collapse; height: auto; margin: 0px; padding: 0px;" width="1000"
class="popupheading">
<tr>
<td>
<div style="width: 1000px; height: auto;">
<div style="width: 1000px; height: 40px; background-image: url('../../../PopU/top.png');
background-repeat: no-repeat;">
<img id="img4" runat="server" height="40" src="~/Images/close1.png" style="float: right;"
width="40" />
</div>
<div style="width: 980px; height: auto; min-height: 100px; background-image: url('../../../PopU/center_bg.png');
background-repeat: repeat-y; padding: 0 10px 0 10px;">
<asp:Panel ID="modal_panel4" runat="server" Height="550" Width="980">
<table width="100%">
<tr style="background-color: #F6F0DB;">
<td align="center" colspan="4">
<asp:UpdatePanel ID="uppanel" runat="server">
<ContentTemplate>
<asp:GridView ID="grdStudentDocuments" runat="server" AutoGenerateColumns="false"
AllowPaging="True" OnPageIndexChanging="grdStudentDocuments_PageIndexChanging"
PageSize="10" Width="970px">
<Columns>
<asp:BoundField DataField="StudentId" HeaderText="Student ID" />
<asp:BoundField DataField="FullName" HeaderText="Student Name">
<ItemStyle HorizontalAlign="Center" Width="250" />
</asp:BoundField>
<asp:BoundField DataField="DocumentName" HeaderText="Document Name" />
<asp:BoundField DataField="ScholershipPRN" HeaderText="University PRN" />
<asp:BoundField DataField="ScholershipName" HeaderText="Scholership Name" />
<asp:TemplateField HeaderText="Select">
<ItemTemplate>
<asp:UpdatePanel ID="pnlup3" runat="server">
<Triggers>
<asp:PostBackTrigger ControlID="btnEditSStudentDocuments" />
</Triggers>
<ContentTemplate>
<asp:ImageButton ID="btnEditSStudentDocuments" runat="server" CommandArgument='<%#Eval("StudentDocumentID")%>'
SkinID="Select" OnClick="btnEditSStudentDocuments_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
no data.......
</EmptyDataTemplate>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
</asp:Panel>
</div>
<div style="width: 1000px; height: 40px; background-image: url('../../../PopU/bottom.png');
background-repeat: no-repeat;">
</div>
</div>
</td>
</tr>
</table>
<asp:Button ID="hfbtnStudentDocumentIDShow" runat="server" OnClick="hfbtnStudentDocumentIDShow_Click"
Style="display: none;" />
<Ajax:ModalPopupExtender ID="modal4" runat="server" PopupControlID="table4" CancelControlID="img3"
TargetControlID="hfbtnStudentDocumentIDShow" OnCancelScript="javascript:__doPostBack('clearfields4')">
</Ajax:ModalPopupExtender>
<Ajax:AnimationExtender ID="AnimationExtender4" runat="server" TargetControlID="hfbtnStudentDocumentIDShow">
<Animations>
<OnClick>
<Parallel AnimationTarget="table4"
Duration=".9" Fps="50">
<FadeIn Duration=".9"/>
</Parallel>
</OnClick>
</Animations>
</Ajax:AnimationExtender>
Problem
When I click on link button it does not display any thing Please help me
Try this, i read somewhere on a blog that when i was stuck in this issue that using ModaloPopup Extender in Update Panel causes issue if we do not use them in the right order, the code i am posting works fine for me, in my case also i am using ModalPopupExtender within update panel try this order of ModalPopupExtender with Update Panel, it will surely work:
<div class="popup">
<asp:Button ID="Button7" runat="server" Text="Button" Style="display: none;" />
<asp:Button ID="Button8" runat="server" Style="display: none;" />
<asp:ModalPopupExtender ID="ModalPopupUploadFiles" BehaviorID="ModalPopupUploadFiles" runat="server" CancelControlID="ImageButton1"
TargetControlID="Button7" PopupControlID="PanelUploadFiles" PopupDragHandleControlID="PopupHeader"
Drag="true" BackgroundCssClass="Overlay">
<Animations>
<OnShown>
<FadeIn Duration=".50" Fps="10" />
</OnShown>
</Animations>
</asp:ModalPopupExtender>
<!--unique css-->
<asp:Panel ID="PanelUploadFiles" runat="server" Style="display: none; overflow:scroll; width:750px; height:400px;" class="PopUpPanel">
<asp:Panel ID="panel1" runat="server" class="closeButton">
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/images/cross.png"/>
</asp:Panel>
<asp:UpdatePanel ID="updtPanel" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="True">
<ContentTemplate>
<br />
<br />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td align="left" valign="top">
<table id="delgateContainer" width="90" border="0" align="left" cellpadding="0" cellspacing="3">
<tr align="center" valign="middle">
<td><asp:ImageButton ID="btnAddFiles" ClientIDMode="Static" ImageUrl="~/images/add.gif" runat="server"/></td>
<td><asp:ImageButton ID="btnStartUpload" ClientIDMode="Static" ImageUrl="~/images/start.gif" runat="server" OnClick="btnStartUpload_Click" /></td>
<td><asp:ImageButton ID="btnCancelUpload" ImageUrl="~/images/cancel.gif" runat="server" OnClick="btnCancelUpload_Click" /></td>
<td><asp:ImageButton ID="btnDeleteAllUploads" ClientIDMode="Static" ImageUrl="~/images/delete2.gif" runat="server" OnClick="btnDeleteAllUploads_Click" /></td>
<td align="left"><asp:CheckBox ID="chckBoxDeleteAll" ClientIDMode="Static" runat="server" /></td>
<td> </td>
</tr>
<tr align="center" valign="middle">
<td colspan="6"> </td>
</tr>
</table>
<p class="gr"><strong></strong></p><p> </p></td>
</tr>
<tr>
<td height="1" colspan="2" class="bgbl"></td>
</tr>
</table></td>
</tr>
<asp:GridView ID="gvUploadFiles" ClientIDMode="Static" onRowCommand="gvUploadFiles_Clicked" DataKeyNames="FileID,FileName,FileSize,FilePath,Status" AllowPaging="false" runat="server"
PagerStyle-HorizontalAlign="Center" AutoGenerateColumns="false" Width="90%"
CellPadding="0" BorderWidth="0" AlternatingRowStyle-BorderColor="LightGray" AlternatingRowStyle-BorderWidth="1" GridLines="None" ShowHeader="true" AlternatingRowStyle-BackColor="#f9f9f9" >
<Columns>
<asp:ImageField DataImageUrlField="ThumbanilPath" HeaderText="Thumbnail" ItemStyle-CssClass="alignmentCenter" ControlStyle-Width="100px" ControlStyle-Height="100px" runat="server"></asp:ImageField>
<asp:BoundField DataField="FileName" ItemStyle-CssClass="alignmentCenter" HeaderText="File Name" />
<asp:BoundField DataField="FileSize" ItemStyle-CssClass="alignmentCenter" HeaderText="File Size" />
<asp:TemplateField>
<ItemTemplate>
<asp:HiddenField ID="filePaths" Value="FilePath" runat="server"/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton CommandName="doingUpload" ItemStyle-CssClass="alignmentRight" class="btnStart" CommandArgument='<%#Container.DisplayIndex%>' ID="imgBtnStart" ImageUrl="~/images/start2.gif" runat="server" /></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="imgBtnCancel" ItemStyle-CssClass="alignmentLeft" CommandName="cancelUploading" CommandArgument='<%#Container.DisplayIndex%>' ImageUrl="~/images/cancel2.gif" runat="server" /></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton CommandName="deleteFile" ItemStyle-CssClass="alignmentRight" Visible="false" id="imgBtnDelete" CommandArgument='<%#Container.DisplayIndex%>' runat="server" ImageUrl="~/images/delete2.gif"></asp:ImageButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox Visible="false" ID="chckBoxDelete" ItemStyle-CssClass="alignmentLeft" class="deleteChkBox" ClientIDMode="Static" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:HiddenField ID="uploadStatus" Value="Status" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="FileID" Visible="false" />
</Columns>
</asp:GridView>
<div id="UploadControl1">
<asp:Button ID="Button17" runat="server" Style="display: none;" />
<asp:ModalPopupExtender ID="ModalPopupUploadControl" BehaviorID="ModalPopupUploadControl" runat="server" CancelControlID="ImageButton4"
TargetControlID="btnAddFiles" PopupControlID="Panel5" PopupDragHandleControlID="PopupHeader"
Drag="true" BackgroundCssClass="Overlay">
<Animations>
<OnShown>
<FadeIn Duration=".50" Fps="10" />
</OnShown>
</Animations>
</asp:ModalPopupExtender>
<asp:Panel ID="Panel5" runat="server" class="PopUpPanel"
style="display: none;overflow:hidden; height:100px; width:300px;"><!---unique css-->
<asp:Panel ID="panel7" runat="server" class="closeButton">
<asp:ImageButton ID="ImageButton4" runat="server" ImageUrl="~/images/cross.png"
/>
</asp:Panel>
<div id="uploadControl" class="all">
<div></div>
<asp:FileUpload ID="uploadingFiles" ClientIDMode="Static" runat="server" class="all" style="display:none;" /><br /><br />
<asp:ImageButton ID="imgBtnAddFile" ClientIDMode="Static" runat="server" ImageUrl="~/images/addToGrid.jpg" OnClick="btnAddToList_Click" style="Display:none;" class="all"/>
</div>
<div>
</div>
</asp:Panel>
</div>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="imgBtnAddFile" />
<asp:AsyncPostBackTrigger ControlID="gvUploadFiles" EventName="RowCommand" />
</Triggers>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="gvUploadFiles" EventName="RowCommand" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="testing" DisplayAfter="0" AssociatedUpdatePanelID="updtPanel" runat="server">
<ProgressTemplate>
<div style=" left:0px; top:0px; position:fixed; width:100%; height:100%;
background-color:White; filter:alpha(opacity=90);opacity:0.9;">
<asp:Image ID="Image2" style="margin-left:500px; margin-top:300px;" ImageUrl="~/images/ajax-loader.gif" runat="server" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<tr>
<td align="right"><img src="../images/m7.gif" width="115" height="26" /></td>
</tr>
</table>
</asp:Panel>
</div>

collapsiblepanel collapse in code not collapsing

I have a panel that i have extended with collapsible extender. It is working perfectly until i try to collapse it by code.
The collapsible panel is shown inside a modal popup where user searches for some data, that is
shown in a grid , In every row of grid there is a select button that fires the row command event of the grid on which i am trying to close the panel.
Markup:
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnAdd"
PopupControlID="pnlpopup" CancelControlID="Cancel" BackgroundCssClass="modalBackground">
</asp:ModalPopupExtender>
<asp:Panel ID="pnlpopup" runat="server" BackColor="White" Height="320px" Width="530px"
Style="display: none">
<table width="100%" style="border: Solid 3px #D55500; height: 100%" cellpadding="0"
cellspacing="0">
<tr>
<td>
Bridge ID :
<asp:TextBox ID="txtID" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvID" runat="server" ControlToValidate="txtID" ValidationGroup="vldAddBridge"
ErrorMessage="Please enter ID" ForeColor="Red"></asp:RequiredFieldValidator>
</td>
<td>
Bridge Name :
<asp:TextBox ID="txtBridgeName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvBridgeName" runat="server" ControlToValidate="txtBridgeName"
ValidationGroup="vldAddBridge" ErrorMessage="Please enter bridge name." ForeColor="Red"></asp:RequiredFieldValidator>
</td>
</tr>
<td colspan="2" style="text-align: right; margin-left: 40px;">
<asp:Button ID="btnSearchUser" runat="server" OnClick="btnSearchUser_Click" TabIndex="5"
Text="Search" ValidationGroup="vgSearchMember" />
</td>
</tr>
<tr>
<td colspan="5" style="background-color: White" class="style6">
<asp:Label ID="lblSearchResults" runat="server"></asp:Label>
<asp:GridView ID="gvSearchResults" runat="server" AllowPaging="True" AutoGenerateColumns="False"
BackColor="White" BorderWidth="1px" CellPadding="4" CssClass="gridviewBorder"
DataKeyNames="EmpId" ForeColor="Black" GridLines="Horizontal" PageSize="5" RowStyle-CssClass="style5"
TabIndex="7" Width="100%" OnPageIndexChanging="gvSearchResults_PageIndexChanging"
OnRowCommand="gvSearchResults_RowCommand">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkSelect" runat="server" Text="Select" CommandName="Select"
CommandArgument='<%# Eval("EmpId") %>'></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="EmpId" HeaderText="Employee ID" />
<asp:BoundField DataField="Alias" HeaderText="Username" />
<asp:BoundField DataField="FirstName" HeaderText="First Name" />
<asp:BoundField DataField="LastName" HeaderText="Last Name" />
</Columns>
</asp:GridView>
<br />
</td>
</tr>
</table>
</asp:Panel>
<asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" CollapseControlID="btnOwner"
ExpandControlID="btnOwner" TargetControlID="PnlRegister" Collapsed="true">
</asp:CollapsiblePanelExtender>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<br />
<asp:Button ID="btnSaveBridge" runat="server" Text="Save" OnClick="btnSaveBridge_Click"
ValidationGroup="vldAddBridge" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click" />
<span style="display: none">
<input type="button" id="Cancel" /></span>
</td>
</tr>
</table>
</asp:Panel>
Code:
protected void gvSearchResults_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "Select")
{
//some business logic
CollapsiblePanelExtender1.Collapsed = true;
ModalPopupExtender1.Show();
}
}
It is not working the panel is always open ?? Any suggestions.....
You are missing
tr in your design. Please check it
Markup:
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnAdd"
PopupControlID="pnlpopup" CancelControlID="Cancel" BackgroundCssClass="modalBackground">
</asp:ModalPopupExtender>
<asp:Panel ID="pnlpopup" runat="server" BackColor="White" Height="320px" Width="530px"
Style="display: none">
<table width="100%" style="border: Solid 3px #D55500; height: 100%" cellpadding="0"
cellspacing="0">
<tr>
<td>
Bridge ID :
<asp:TextBox ID="txtID" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvID" runat="server" ControlToValidate="txtID" ValidationGroup="vldAddBridge"
ErrorMessage="Please enter ID" ForeColor="Red"></asp:RequiredFieldValidator>
</td>
<td>
Bridge Name :
<asp:TextBox ID="txtBridgeName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvBridgeName" runat="server" ControlToValidate="txtBridgeName"
ValidationGroup="vldAddBridge" ErrorMessage="Please enter bridge name." ForeColor="Red"></asp:RequiredFieldValidator>
</td>
</tr>
**<tr> //This is missing**
<td colspan="2" style="text-align: right; margin-left: 40px;">
<asp:Button ID="btnSearchUser" runat="server" OnClick="btnSearchUser_Click" TabIndex="5"
Text="Search" ValidationGroup="vgSearchMember" />
</td>
</tr>
<tr>
<td colspan="5" style="background-color: White" class="style6">
<asp:Label ID="lblSearchResults" runat="server"></asp:Label>
<asp:GridView ID="gvSearchResults" runat="server" AllowPaging="True" AutoGenerateColumns="False"
BackColor="White" BorderWidth="1px" CellPadding="4" CssClass="gridviewBorder"
DataKeyNames="EmpId" ForeColor="Black" GridLines="Horizontal" PageSize="5" RowStyle-CssClass="style5"
TabIndex="7" Width="100%" OnPageIndexChanging="gvSearchResults_PageIndexChanging"
OnRowCommand="gvSearchResults_RowCommand">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkSelect" runat="server" Text="Select" CommandName="Select"
CommandArgument='<%# Eval("EmpId") %>'></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="EmpId" HeaderText="Employee ID" />
<asp:BoundField DataField="Alias" HeaderText="Username" />
<asp:BoundField DataField="FirstName" HeaderText="First Name" />
<asp:BoundField DataField="LastName" HeaderText="Last Name" />
</Columns>
</asp:GridView>
<br />
</td>
</tr>
</table>
</asp:Panel>
<asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" CollapseControlID="btnOwner"
ExpandControlID="btnOwner" TargetControlID="PnlRegister" Collapsed="true">
</asp:CollapsiblePanelExtender>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<br />
<asp:Button ID="btnSaveBridge" runat="server" Text="Save" OnClick="btnSaveBridge_Click"
ValidationGroup="vldAddBridge" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click" />
<span style="display: none">
<input type="button" id="Cancel" /></span>
</td>
</tr>
</table>
</asp:Panel>
Hope it solve your problem

asp .net Gridview height overflows into next div

I am having a Gridview inside a div tag
and there is a div below this div tasg containg other contents.
If I don't set the Gridview div height then the contents of GV overflows into parts present below the GV.
Else if I set, when the records are less, there would be a empty block after the GV. How do I solve this. Please have look at the code ...
<div style="height: 100%; width: 785px; margin-top: 0px; overflow: hidden; display: table;">
<tr>
<td>
<asp:GridView ID="dgAccessGrp" runat="server" Style="z-index: 101; left: 13px; position: absolute;
margin-top: 0px; width: 686px;" AutoGenerateColumns="False" DataKeyNames="access_group_id"
AllowPaging="True" RowStyle-Height="20px" CellPadding="3" CellSpacing="1" OnRowCancelingEdit="accessGrp_RowCancelingEdit"
OnRowDeleting="accessGrp_RowDeleting" OnRowEditing="accessGrp_RowEditing" OnRowUpdating="accessGrp_RowUpdating"
OnPageIndexChanging="dgAccessGrp_PageIndexChanging" OnRowCommand="dgAccessGrp_RowCommand"
OnRowDataBound="dgAccessGrp_RowDataBound" Font-Bold="False">
<Columns>
<asp:TemplateField HeaderText="SI No">
<ItemTemplate>
<asp:Label ID="lblAccessGrpID" runat="server" Width="70px" Text="<%# Bind('access_group_id') %>"
Visible="false"></asp:Label>
<asp:Label ID="lblSIno" runat="server" Width="15px" Text="<%#Container.DataItemIndex+1 %>"></asp:Label>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
<HeaderStyle HorizontalAlign="Left" BackColor="#006699" Font-Names="arial,helvetica,sans-serif"
Font-Size="8pt" ForeColor="White" />
<ControlStyle Font-Names="Arial" Font-Size="8pt" />
</asp:TemplateField>
<asp:BoundField DataField="access_group_id" Visible="False" />
<asp:TemplateField HeaderText="Access group">
<ItemTemplate>
<asp:LinkButton ID="btnSelect" CommandArgument='<%# Bind("access_group_id") %>' CommandName='SelectAccessGroup'
Text='<%# Bind("access_group_name") %>' runat="server" Width="90px"></asp:LinkButton>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtAccessGrp" MaxLength="50" runat="server" Width="90px" Text='<%# Bind("access_group_name") %>'> </asp:TextBox>
</EditItemTemplate>
<HeaderStyle HorizontalAlign="Left" BackColor="#006699" Font-Names="arial,helvetica,sans-serif"
Font-Size="8pt" ForeColor="White" />
<ControlStyle Font-Names="Arial" Font-Size="8pt" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Business Unit">
<ItemTemplate>
<asp:Label ID="lblBU" runat="server" Width="70px" Text="<%# Bind('bu_name') %>"></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:Label ID="lblBU" runat="server" Width="70px" Text="<%# Bind('bu_id') %>" Visible="false"></asp:Label>
<asp:Label ID="lblIsActiveBU" runat="server" Width="70px" Text="<%# Bind('bu_active') %>"
Visible="false"></asp:Label>
<asp:DropDownList ID="dgDrpBU" runat="server" DataValueField="bu_id" DataTextField="bu_name">
</asp:DropDownList>
</EditItemTemplate>
<HeaderStyle HorizontalAlign="Left" BackColor="#006699" Font-Names="arial,helvetica,sans-serif"
Font-Size="8pt" ForeColor="White" />
<ControlStyle Font-Names="Arial" Font-Size="8pt" />
</asp:TemplateField>
<asp:TemplateField HeaderText="BU Line">
<ItemTemplate>
<asp:Label ID="lblBULine" runat="server" Width="70px" Text="<%# Bind('business_line_name') %>"></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:Label ID="lblBULine" runat="server" Width="70px" Text="<%# Bind('business_line_id') %>"
Visible="false"></asp:Label>
<asp:Label ID="lblIsActiveBULine" runat="server" Width="70px" Text="<%# Bind('business_line_active') %>"
Visible="false"></asp:Label>
<asp:DropDownList ID="dgDrpBULine" runat="server" DataValueField="business_line_id"
DataTextField="business_line_name">
</asp:DropDownList>
</EditItemTemplate>
<HeaderStyle HorizontalAlign="Left" BackColor="#006699" Font-Names="arial,helvetica,sans-serif"
Font-Size="8pt" ForeColor="White" />
<ControlStyle Font-Names="Arial" Font-Size="8pt" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Location">
<ItemTemplate>
<asp:Label ID="lblLocation" runat="server" Width="70px" Text="<%# Bind('location') %>"></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:Label ID="lblLocation" runat="server" Width="70px" Text="<%# Bind('location_id') %>"
Visible="false"></asp:Label>
<asp:Label ID="lblIsActiveStatus" runat="server" Width="70px" Text="<%# Bind('status') %>"
Visible="false"></asp:Label>
<asp:DropDownList ID="dgDrpBULocation" runat="server" DataValueField="location_id"
DataTextField="location">
</asp:DropDownList>
</EditItemTemplate>
<HeaderStyle HorizontalAlign="Left" BackColor="#006699" Font-Names="arial,helvetica,sans-serif"
Font-Size="8pt" ForeColor="White" />
<ControlStyle Font-Names="Arial" Font-Size="8pt" />
</asp:TemplateField>
<asp:CommandField ButtonType="Image" CancelImageUrl="~/IMAGEs/cross.gif" EditImageUrl="~/IMAGEs/edit.gif"
EditText="" HeaderText="" ShowEditButton="True" UpdateImageUrl="~/IMAGEs/check.gif"
UpdateText="">
<ControlStyle Font-Names="Arial" Font-Size="8pt" />
<HeaderStyle BackColor="#006699" Font-Names="Arial" Font-Size="8pt" ForeColor="White" />
<ItemStyle Width="30px" />
</asp:CommandField>
<asp:TemplateField HeaderText="">
<ItemTemplate>
<asp:LinkButton ID="btnDelete" CommandArgument='<%# Bind("access_group_id") %>' OnClientClick="return confirm('Are you sure you want to delete this record?');"
runat="server" Width="60px" CommandName="Delete">Delete</asp:LinkButton>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" Width="50px" />
<HeaderStyle HorizontalAlign="Left" BackColor="#006699" Font-Names="arial,helvetica,sans-serif"
Font-Size="8pt" ForeColor="White" />
<ControlStyle Font-Names="Arial" Font-Size="8pt" />
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="Yellow" />
<PagerSettings Position="TopAndBottom" />
<PagerStyle Wrap="True" BackColor="#CCCCCC" HorizontalAlign="Center" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:pt7dataConnectionString %>"
SelectCommand="SELECT access_group_name, is_active, access_group_id, last_modified_by, date_stamp, bu_id, business_line_id, location_id FROM tbl_car_access_groups ORDER BY access_group_id DESC">
</asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:pt7dataConnectionString %>"
SelectCommand="Select bu_id,bu_name from tbl_car_bu ORDER BY bu_name ASC"></asp:SqlDataSource>
</td>
</tr>
</div>
<div id="detailArea">
<br />
<asp:Label ID="lblError" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="9pt"
ForeColor="White" Visible="False" BackColor="#E2001A"></asp:Label>
<table style="height: 347px; width: 915px;">
<tr>
<td valign="top" bgcolor="#E1FFE1" style="border: 2px solid #808285">
<table>
<tr>
<td class="style26" style="font-family: Arial; color: #003b6a; font-size: 12px; font-weight: bold"
valign="bottom">
Select User(s) Below :
</td>
</tr>
<tr>
<td class="style17" valign="top">
<asp:ListBox ID="lbAllUsers" runat="server" Font-Names="Arial" Font-Size="9pt" Height="227px"
Width="432px" SelectionMode="Multiple"></asp:ListBox>
</td>
</tr>
<tr>
<td class="style27">
<asp:Button ID="btnAddToMemberList" runat="server" Text="Add Selected User(s) To 'Group Members' List"
BackColor="#215F8B" BorderColor="#A2BAD2" BorderStyle="Solid" Font-Bold="True"
Font-Names="Arial" Font-Size="9pt" ForeColor="White" Width="346px" Height="23px"
OnClick="btnAddToMemberList_Click" OnClientClick="return AddUserToList()" />
</td>
</tr>
<tr>
<td class="style27">
<asp:Button ID="btnAddToGAList" runat="server" Text="Add Selected User(s) To 'Group Administrators' List"
BackColor="#215F8B" BorderColor="#A2BAD2" BorderStyle="Solid" Font-Bold="True"
Font-Names="Arial" Font-Size="9pt" ForeColor="White" Width="346px" Height="23px"
OnClick="btnAddToGAList_Click" OnClientClick="return AddUserToList()" />
</td>
</tr>
<tr>
<td class="style27">
<asp:Button ID="btnAddToGDList" runat="server" Text="Add Selected User(s) To 'Delgated Responsibility' List"
BackColor="#215F8B" BorderColor="#A2BAD2" BorderStyle="Solid" Font-Bold="True"
Font-Names="Arial" Font-Size="9pt" ForeColor="White" Width="346px" Height="23px"
OnClick="btnAddToGDList_Click" OnClientClick="return AddUserToList()" />
</td>
</tr>
</table>
</td>
<td valign="top" bgcolor="#FFEFB0" style="border: 2px solid #808285" class="style31">
<table>
<tr>
<td class="style28" style="font-family: Arial; color: #003b6a; font-size: 12px; font-weight: bold"
valign="bottom">
Group Members :
</td>
</tr>
<tr>
<td class="style29" valign="top">
<asp:ListBox ID="lbMembers" runat="server" Font-Names="Arial" Font-Size="9pt" Height="227px"
Width="432px" SelectionMode="Multiple"></asp:ListBox>
</td>
</tr>
<tr>
<td class="style30">
<asp:Button ID="btnDelMember" runat="server" Text="Remove Selected Member(s)" BackColor="#215F8B"
BorderColor="#A2BAD2" BorderStyle="Solid" Font-Bold="True" Font-Names="Arial"
Font-Size="9pt" ForeColor="White" Width="212px" Height="23px" OnClick="btnDelMember_Click"
OnClientClick="return DelMembers()" />
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="border: 2px solid #808285; width: 913px; background-color: #FFEFB0;">
<tr>
<td>
<table>
<tr>
<td style="font-family: Arial; color: #003b6a; font-size: 12px; font-weight: bold"
valign="bottom">
Group Administrators :
</td>
<td style="font-family: Arial; color: #003b6a; font-size: 12px; font-weight: bold"
valign="bottom">
Delegated Responsibility To :
</td>
</tr>
<tr>
<td>
<asp:ListBox ID="lbGAs" runat="server" Font-Names="Arial" Font-Size="9pt" Height="227px"
Width="432px" SelectionMode="Multiple"></asp:ListBox>
</td>
<td>
<asp:ListBox ID="lbGDs" runat="server" Font-Names="Arial" Font-Size="9pt" Height="227px"
Width="432px" SelectionMode="Multiple"></asp:ListBox>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnDelGA" runat="server" Text="Remove Selected User(s)" BackColor="#215F8B"
BorderColor="#A2BAD2" BorderStyle="Solid" Font-Bold="True" Font-Names="Arial"
Font-Size="9pt" ForeColor="White" Width="212px" Height="23px" OnClick="btnDelGA_Click"
OnClientClick="return DelGAs()" />
</td>
<td>
<asp:Button ID="btnDelGD" runat="server" Text="Remove Selected User(s)" BackColor="#215F8B"
BorderColor="#A2BAD2" BorderStyle="Solid" Font-Bold="True" Font-Names="Arial"
Font-Size="9pt" ForeColor="White" Width="212px" Height="23px" OnClick="btnDelGD_Click"
OnClientClick="return DelGDs()" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td style="font-family: Arial; color: #003b6a; font-size: 12px; font-weight: bold">
Name/Email Pairs - Can be pasted into Outlook : (Press Ctrl+A within box to
select all) <asp:TextBox ID="tbUserNames" runat="server" Height="140px" TextMode="MultiLine"
Width="881px" ReadOnly="True"></asp:TextBox>
<br />
<br />
<br />
</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
</div>
Set the minimum height of the div containing your gridview.
Also set the overflow property to auto of the gridview div
You can refer these links
Mysterious min-height behavior
CSS Max Height Property
Problem in Style you have added to gridview
Please remove "position: absolute" attribute from your style.

Resources