CSS
#outer
{
position: relative;
z-index: 3;
width: 100%;
margin: 0px auto 0 auto;
background: #ffffff;
box-shadow: 0px 0px 60px 0px rgba(0,0,0,0.2);
float:inherit;
}
#main
{
display:inline;
position: relative;
padding: 0px 0px 0px 0px;
width: 100%;
}
#header
{
position: relative;
padding: 28px;
height: 125px;
background: #ffffff;
color: #ffffff;
text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
border-bottom: solid 1px #003B47;
}
#copyright
{
padding: 40px 0 80px 0;
text-align: center;
color: #777777;
}
HTML
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div id="outer">
<div id="header" style="background-color: lightgrey">
</div>
</div>
<div id="main">
<div id="sidebar" style="background-color: lightgrey">
<div id="menubar">
<h2>
Menu
</h2>
<ul class="linkedList">
<li>
<img id="img12" src="./images/bt_tri.gif" alt="" width="16" height="16" runat="server"/>
Server Search
</li>
<li>
<img id="img13" src="./images/bt_tri.gif" alt="" width="16" height="16" runat="server"/>
Service Status
</li>
<li>
<img id="img14" src="./images/bt_tri.gif" alt="" width="16" height="16" runat="server"/>
Data Records
</li>
</ul>
</div>
</div>
<div id="content">
<div class="box">
<h2>
Member Details
</h2>
<p>
<asp:UpdatePanel id="Up1" runat="server">
<contenttemplate>
Last Refreshed : <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><BR /><BR />
<asp:GridView id="gvMem_Details" runat="server" SkinID="Professional" OnRowDataBound="gvMem_Details_RowDataBound">
<RowStyle Width="500px"/>
</asp:GridView>
<asp:Timer ID="Timer1" runat="server" Interval="600">
</asp:Timer>
</contenttemplate>
</asp:UpdatePanel><br class="clear" />
</p>
</div>
<div class="box">
<h2>
Reservation Details
</h2>
<p>
<asp:UpdatePanel id="UpdatePanel1" runat="server">
<contenttemplate>
Last Refreshed : <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label><BR /><BR />
<asp:GridView id="gvRes_Details" runat="server" SkinID="Professional" OnRowDataBound="gvRes_Details_RowDataBound">
</asp:GridView>
<asp:Timer ID="Timer2" runat="server" Interval="600">
</asp:Timer>
</contenttemplate>
</asp:UpdatePanel>
</p>
</div>
</div><br class="clear" />
</div><br class="clear" />
</div>
<div id="copyright">
© Company. Design by Technies.
</div>
</form>
I have to stretch my div based on the content inside... i have head, body and copyright(lower) divs... I want body div size should be of its dynamic contents.
Related
I have created a website using asp.net. Everything worked fine until now. But the last page does not behave as i expected. In the UI there is a dropdownlist,gridview,link button and few labels within a collapse bar. Gridview get populated according to the selection of the dropdownlist. In the gridview there is a button and when clicked it, data relevant to the specific row loads into labels. Link button is to view a pdf upload to the system. Problem occurs when click on this link button. As soon as I click on the link button design changes its size of fonts,grid etc. How to stop happening it?
Note : C# code works without any error.
This problem occurs only in one page.
This is my aspx code
<%# Page Title="" Language="C#" MasterPageFile="~/CDDS_Master.Master" AutoEventWireup="true"
CodeBehind="agencyAdmin.aspx.cs" Inherits="Claim_Distribution_System.agencyAdmin" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="agency" runat="server">
<link href="CSS/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="JS/jquery.min.js" type="text/javascript"></script>
<script src="JS/bootstrap.min.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div id="div0" runat="server" style="width: 100%; height: auto; margin-top: 15px">
<asp:Label ID="lblApp" runat="server" Text="Competition :" Style="margin-left: 14px;
margin-top: 5px">
</asp:Label>
<asp:DropDownList ID="ddlComp" runat="server" Style="margin-top: 5px; margin-left: 5px;
width: 60%; height: auto" AutoPostBack="True" OnSelectedIndexChanged="ddlCompName_SelectedIndexChanged">
</asp:DropDownList>
</div>
<div id="div1" style="width: 100%; height: auto; float: left; margin-left: 10px">
<asp:GridView ID="grdSum" runat="server" Style="margin-top: 10px;" OnRowDataBound="grdSum_RowDataBound"
OnRowCreated="grdSum_RowCreated" OnSelectedIndexChanged="grdSum_SelectedIndexChanged"
CellPadding="4" ForeColor="#333333" GridLines="None" AutoGenerateColumns="false">
<RowStyle BackColor="#FFFBD6" ForeColor="#333333" HorizontalAlign="Justify" />
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
<HeaderStyle BackColor="#990000" ForeColor="White" Font-Bold="True" />
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="refer" HeaderText="REFERENCE NUMBER">
<ItemStyle Width="200px"></ItemStyle>
<%--200--%>
</asp:BoundField>
<asp:BoundField DataField="BRANCH_CODE" HeaderText="BRANCH">
<ItemStyle Width="70px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="SO_CODE" HeaderText="SO">
<ItemStyle Width="100px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="APPEAL_CREATE_DATE" HeaderText="CREATE DATE">
<ItemStyle Width="120px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="ATTACHMENT_UPLOAD" HeaderText="ATTACHMENT">
<ItemStyle Width="100px"></ItemStyle>
</asp:BoundField>
<asp:ButtonField Text="Click To View" CommandName="Select">
<ItemStyle Width="100px"></ItemStyle>
</asp:ButtonField>
</Columns>
</asp:GridView>
<asp:LinkButton ID="lnkDummy" runat="server"></asp:LinkButton>
</div>
<div id="emp" style="width: 100%; height: 20px; float: left">
</div>
<div id="col" style="width: 100%; height: auto; margin-left: 5px; float: left">
<div class="container">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Basic Appeal Info</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<div id="col1Body" style="width: 95%; height: auto;">
<div id="inner1" style="width: 98%; height: auto; float: left">
<asp:Label ID="Label1" runat="server" Style="width: 35%; margin-left: 43px" Text="Reference No :"></asp:Label>
<asp:Label ID="lblRef" runat="server" Style="width: 90%; margin-left: 10px" Text="Reference No :"></asp:Label>
</div>
<div id="inner2" style="width: 98%; height: auto; float: left; margin-top: 10px">
<asp:Label ID="Label2" runat="server" Style="width: 35%; margin-left: 20px" Text="Competion Name :"></asp:Label>
<asp:Label ID="lblComName" runat="server" Style="width: 90%; margin-left: 10px" Text="Reference No :"></asp:Label>
</div>
<div id="inner3" style="width: 98%; height: auto; float: left; margin-top: 10px">
<asp:Label ID="Label3" runat="server" Style="width: 35%; margin-left: 48px" Text="Branch Code :"></asp:Label>
<asp:Label ID="lblBranch" runat="server" Style="width: 90%; margin-left: 10px" Text="Reference No :"></asp:Label>
</div>
<div id="inner4" style="width: 98%; height: auto; float: left; margin-top: 10px">
<asp:Label ID="Label4" runat="server" Style="width: 35%; margin-left: 72px" Text="SO Code :"></asp:Label>
<asp:Label ID="lblSo" runat="server" Style="width: 90%; margin-left: 10px" Text="Reference No :"></asp:Label>
</div>
<div id="inner5" style="width: 98%; height: auto; float: left; margin-top: 10px">
<asp:Label ID="Label6" runat="server" Style="width: 35%; margin-left: 74px" Text="Remarks :"></asp:Label>
<asp:Label ID="lblRemarks" runat="server" Style="width: 90%; height: auto; text-align: justify;
margin-left: 10px;" Text="Reference No :"></asp:Label>
</div>
<div id="inner6" style="width: 80%; height: auto; float: left; margin-top: 10px;
margin-left: 10%; margin-bottom: 10px">
<div id="inner61" style="width: 30%; height: auto; float: left; margin-left: 100px">
<asp:GridView ID="grdKPI" runat="server" Style="margin-left: 5px; margin-top: 5px;
margin-bottom: 10px; float: left; border-color: #9B0423; border-width: medium;
width: 50%; text-align: center;" OnRowDataBound="grdKPI_RowDataBound">
<HeaderStyle BackColor="#9B0423" ForeColor="White" />
<AlternatingRowStyle BackColor="#FFE6E6" />
</asp:GridView>
</div>
<div id="inner62" style="width: 30%; height: auto; float: left; margin-left: 10px">
<asp:GridView ID="grdPolicyDetails" runat="server" Style="margin-top: 5px; margin-bottom: 10px;
float: left; border-color: #9B0423; border-width: medium; width: 50%; text-align: center"
OnRowDataBound="grdPolicyDetails_RowDataBound">
<HeaderStyle BackColor="#9B0423" ForeColor="White" />
<AlternatingRowStyle BackColor="#FFE6E6" />
</asp:GridView>
</div>
</div>
<div id="empty" style="width: 100%; height: auto; float: left">
<asp:Label ID="Label8" runat="server" Style="width: 35%; margin-left: 25px" Text="View Attachment :"></asp:Label>
<asp:LinkButton ID="pdfViewAdmin" runat="server" Style="margin-left: 10px" OnClick="pdfViewAdmin_Click">View PDF</asp:LinkButton>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">LOP</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<div id="colBody2" style="width: 95%; height: auto;">
<div id="inner7" style="width: 98%; height: auto;">
<asp:Label ID="Label5" runat="server" Style="width: 35%; margin-left: 43px" Text="Remarks :"></asp:Label>
<asp:Label ID="lblRemarksLOP" runat="server" Style="width: 90%; margin-left: 10px"
Text="Reference No :"></asp:Label>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Accountant</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<div id="colBody3" style="width: 95%; height: auto;">
<div id="inner8" style="width: 98%; height: auto;">
<asp:Label ID="Label7" runat="server" Style="width: 35%; margin-left: 43px" Text="Remarks :"></asp:Label>
<asp:Label ID="lblRemarksAcc" runat="server" Style="width: 90%; margin-left: 10px"
Text="Reference No :"></asp:Label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</asp:Content>
Here are images before the link button click and after link button click
Link button click event
protected void pdfViewAdmin_Click(object sender, EventArgs e)
{
Response.Write(string.Format("<script>window.open('{0}','_blank');</script>", "viewPDF.aspx"));
lblComName.Visible = true;
lblBranch.Visible = true;
lblSo.Visible = true;
}
Following change solved my problem.
protected void pdfViewAdmin_Click(object sender, EventArgs e)
{
//Response.Write(string.Format("<script>window.open('{0}','_blank');</script>", "viewPDF.aspx"));
this.ClientScript.RegisterStartupScript(this.GetType(), this.GetType().Name, string.Format("window.open('{0}', '_blank');", "viewPDF.aspx"), true);
lblComName.Visible = true;
lblBranch.Visible = true;
lblSo.Visible = true;
lblRef.Visible = true;
lblRemarks.Visible = true;
}
Commented line is code i had earlier. And the line below it is the new code and it worked.
This is where i found the answer
Click to view the page
I have a label,checkboxlist and a datagridview within a div. I have used inline css to move items left. But it doesn't work as i expect. How can i move them? I want all the three items in a row. Below i have added my aspx code.
<div id="div2" style="width:100%; height:auto; margin-top:30px">
<div id="div21" style="width: 50%; height:auto">
<div id="div211" style=" width:15%; height:auto">
<asp:Label ID="lblKPI" Text="KPI :" runat="server" style="margin-top:10px; margin-left:20px">
</asp:Label>
</div>
<div id="div212" style=" width:60%; height:auto; float:left">
<asp:CheckBoxList ID="chklstKPI" style="width:auto; height:auto" runat="server">
</asp:CheckBoxList>
</div>
</div>
<asp:GridView ID="GridView1" runat="server" style="float:left">
</asp:GridView>
</div>
You need to wrap gridview in div and set float:left to that div. Also inner div needs to have float:left as well.
Try below html
<div id="div2" style="width:100%; height:auto; margin-top:30px">
<div id="div21" style="width: 50%; height:auto;float:left">
<div id="div211" style=" width:15%; height:auto;float:left">
<asp:Label ID="lblKPI" Text="KPI :" runat="server" style="margin-top:10px; margin-left:20px">
</asp:Label>
</div>
<div id="div212" style=" width:60%; height:auto; float:left">
<asp:CheckBoxList ID="chklstKPI" style="width:auto; height:auto" runat="server">
</asp:CheckBoxList>
</div>
</div>
<div style="float:left;width:45%">
<asp:GridView ID="GridView1" runat="server">
<Columns>
<asp:TemplateField HeaderText="SomeText">
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</div>
Place gridview in a div and set float:left; property for that div
try this please:
<div id="div2" style="width: 100%; height: auto; margin-top: 30px">
<div id="div21" style="width: 50%; height: auto; float: left;">
<div id="div211" style="width: 15%; height: auto">
<asp:Label ID="lblKPI" Text="KPI :" runat="server" Style="margin-top: 10px; margin-left: 20px">
</asp:Label>
</div>
<div id="div212" style="width: 60%; height: auto; float: left">
<asp:CheckBoxList ID="chklstKPI" Style="width: auto; height: auto" runat="server">
</asp:CheckBoxList>
</div>
</div>
<div id="div22" style="width: 45%; height: auto; float: left;">
<asp:GridView ID="GridView1" runat="server" Style="float: left">
</asp:GridView>
</div>
</div>
Please add style to the divs:
<div id="div2" style="width:100%; height:auto; margin-top:30px; text-align: left;">
<div id="div21" style="width: 50%; height:auto; display: inline;">
<div id="div211" style=" width:15%; height:auto; display: inline;">
<asp:Label ID="lblKPI" Text="KPI :" runat="server" style="margin-top:10px; margin-left:20px">
</asp:Label>
</div>
<div id="div212" style=" width:60%; height:auto; float:left; display: inline;">
<asp:CheckBoxList ID="chklstKPI" style="width:auto; height:auto" runat="server">
</asp:CheckBoxList>
</div>
</div>
<div style="display: inline; width:50%">
<asp:GridView ID="GridView1" runat="server" style="float:left">
</asp:GridView>
</div>
</div>
You have to set float : left in style property of div
here i give you one example simply try to copy paste it
<div id="div2" style="width:100%; height:auto; margin-top:30px; position:absolute">
<div id="div21" style="width: 50%; height:auto">
<div id="div211" style=" width:15%; height:auto">
<asp:Label ID="lblKPI" Text="KPI :" runat="server" style="margin-top:10px; margin-left:200px; position:absolute">
</asp:Label>
</div>
<div id="div212" style=" width:60%; margin-left:200px; height:auto; float:left">
<asp:CheckBoxList ID="chklstKPI" style="width:auto; height:auto" runat="server">
</asp:CheckBoxList>
</div>
</div>
hi i am doing a social network service on asp.net c#.I want to refresh the messages within 1 second without loading whole page. I am display messages using repeater control.
I want to refresh this repeater control continuously after 1 second, but whole page should not be reloaded.
repeater control code
setInterval(function () { $(".refresh").load(location.href + " .refresh"); }, 1000);
<asp:Repeater runat="server" ID="Repeater1">
<ItemTemplate>
<div style="border-top: thin none #BBCEB3; border-bottom: thin none #BBCEB3; padding: 10px; width: 548px; margin-top: 10px; right: 10px; left: 10px; border-left-width: thin; margin-left: 15px; background-color: #e9eaee; border-left-color: #BBCEB3; border-right-color: #BBCEB3;">
<br />
<div style="width: 58px; height: 40px">
<asp:Image ID="Image2" runat="server" Height="59px" ImageAlign="Top" ImageUrl="~/Profile/Image/Default.png" Width="55px" />
</div>
<div style="width: 307px; margin-left: 65px; margin-top: -60px">
<asp:Label ID="Label6" runat="server" Font-Bold="True" Font-Names="Arial" ForeColor="#000066"><%#Eval("SenderID") %> </asp:Label>
</div>
<div id="status" style=" width: 461px; margin-left: 78px; margin-top: 11px;"> <asp:Label ID="Label7" runat="server" Font-Italic="False" ForeColor="Black" Font-Size="Medium"><%#Eval("Messages") %> </asp:Label>
</div>
<div style="margin-left: 350px">
<asp:Label ID="Label11" runat="server" Text="Posted on: " Font-Size="Small"><%#Eval("Time") %> </asp:Label>
</div>
</div>
</ItemTemplate>
textbox code
<asp:TextBox ID="Message" runat="server" OnTextChanged="TextBox3_TextChanged" style="margin-left: 12px; text-align: left;" TextMode="MultiLine" Width="564px" Height="100px"></asp:TextBox>
Hope this helps:
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Trans.aspx.cs" Inherits="WebClient.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(
function() {
setInterval(function () { $('#Repeater1').load(location.href + " #Repeater1"); }, 1000);
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:Repeater runat="server" ID="Repeater1">
<ItemTemplate>
<div style="border-top: thin none #BBCEB3; border-bottom: thin none #BBCEB3; padding: 10px; width: 548px; margin-top: 10px; right: 10px; left: 10px; border-left-width: thin; margin-left: 15px; background-color: #e9eaee; border-left-color: #BBCEB3; border-right-color: #BBCEB3;">
<br />
<div style="width: 58px; height: 40px">
<asp:Image ID="Image2" runat="server" Height="59px" ImageAlign="Top" ImageUrl="~/Profile/Image/Default.png" Width="55px" />
</div>
<div style="width: 307px; margin-left: 65px; margin-top: -60px">
<asp:Label ID="Label6" runat="server" Font-Bold="True" Font-Names="Arial" ForeColor="#000066"><%#Eval("SenderID") %> </asp:Label>
</div>
<div id="status" style=" width: 461px; margin-left: 78px; margin-top: 11px;"> <asp:Label ID="Label7" runat="server" Font-Italic="False" ForeColor="Black" Font-Size="Medium"><%#Eval("Messages") %> </asp:Label>
</div>
<div style="margin-left: 350px">
<asp:Label ID="Label11" runat="server" Text="Posted on: " Font-Size="Small"><%#Eval("Time") %> </asp:Label>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</asp:Content>
I have designed a mockup in Photoshop and I intend to apply it to my product catalog's ListView control but it does not seem to be displaying it right (misaligned?) and I hope someone here could pintpoint my mistake as I've been trying to figure out to no avail.
Expected result/Mockup:
After debug (don't mind the missing photos):
Take a look at my codes,
CSS:
.productItem {
width: 200px;
float: left;
padding: 5px;
margin: 5px;
text-align: center;
background-color: White;
}
.cell1
{
width:117px;
height:27px;
background-image: url("images/blackbutton.jpg");
float:left;
font-size:12px;
vertical-align:middle;
color:White;
text-align:center;
}
.cell2
{
width:118px;
height:27px;
background-image: url("images/orangebutton.jpg");
float:left;
font-size:12px;
vertical-align:middle;
color:White;
text-align:center;
}
ListView narkup:
<div class="catalog">
<asp:ListView runat="server" ID="listView" GroupItemCount="3" DataSourceID="AccessDataSource1">
<LayoutTemplate>
<div style="height: 962px;">
<div style="width: 790px;">
<asp:PlaceHolder runat="server" ID="groupPlaceHolder" />
<asp:DataPager runat="server" ID="dpMyDatePager" PageSize="3" PagedControlID="listView" .Ю
</div>
</LayoutTemplate>
<GroupTemplate>
<div style="clear: both;">
<asp:PlaceHolder runat="server" ID="itemPlaceHolder" />
</div>
</GroupTemplate>
<ItemTemplate>
<div class="productItem">
<div>
<img src='<%# Eval("ProductUrl") %>' height="180" width="200" />
</div>
<div>
<b>
<%# Eval("ProductBrand") %> <%# Eval("ProductModel") %></b>
</div>
<div>
Our Price: $<%# Eval("NormalPrice") %>
</div>
</div>
<div class="cell1">Add to cart</div>
<div class="cell2">View details</div>
</ItemTemplate>
</asp:ListView>
</div>
Change cell1 and cell2 width to 50%
and try following layout:
<LayoutTemplate>
<div style="height: 962px;">
<div style="width: 790px;">
<asp:PlaceHolder runat="server" ID="groupPlaceHolder" />
</div>
<asp:DataPager runat="server" ID="dpMyDatePager" PageSize="6" PagedControlID="listView"></asp:DataPager>
</div>
</LayoutTemplate>
<GroupTemplate>
<div style="clear: both;">
<asp:PlaceHolder runat="server" ID="itemPlaceHolder" />
</div>
</GroupTemplate>
<ItemTemplate>
<div class="productItem">
<div>
<img src='<%# Eval("ProductUrl") %>' height="180" width="200" />
</div>
<div>
<b>
<%# Eval("ProductBrand") %>
<%# Eval("ProductModel") %></b></div>
<div style="clear: right;">
Our Price: $<%# Eval("NormalPrice") %></div>
<div class="cell1">
Add to cart</div>
<div class="cell2">
View details</div>
</div>
</ItemTemplate>
i have a page wherein i need to lock the screen when user clicks on the send email button, but everything is happening except i am unable to see my lock screen page. i have used the update progress for this purpose.. m posting part of the code here
.aspx part
<asp:UpdatePanel ID="SendMailUpdatePanel" runat="server">
<ContentTemplate>
<div style="float: right;">
<asp:Button ID="btnSend" runat="server" Text="Send" ToolTip="Send "
Visible="false" Font-Bold="True" OnClick="btnSendResume_Click" />
<asp:Button ID="btnDown" runat="server" Text="Download IDs" ToolTip="follow-up"
Visible="false" Font-Bold="True" OnClick="btnDownloadEmailIDs_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
<table>
<td style="width: auto; vertical-align: top;">
<asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="SendMailUpdatePanel">
<ProgressTemplate>
<div id="blur" style="width: 100%; background-color: black; moz-opacity: 0.5; khtml-opacity: .5;
opacity: .5; filter: alpha(opacity=50); z-index: 120; height: 100%; position: absolute;
top: 0; left: 0;">
<div id="progress" style="z-index: 200; background-color: White; position: absolute; top: 0pt;
left: 0pt; border: solid 1px black; padding: 5px 5px 5px 5px; text-align: center;">
<b>Mail in progress.Please Wait...</b>
<br />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</td>
</table>
.cs part
protected void btnSendResume_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(2000);
}
rest of the part i have not mentioned here...any help
Your HTML Table is incorrectly formed. You have no <tr> elements, but the real problem probably lies with your style attributes, please see my updated code below.
You can find a good example of how to accomplish what you are trying to do here: http://blogs.visoftinc.com/2008/03/13/Modal-UpdateProgress-for-UpdatePanel-Revisited/
Try adjusting your code to the following:
<asp:UpdatePanel ID="SendMailUpdatePanel" runat="server">
<ContentTemplate>
<div style="float: right;">
<asp:Button ID="btnSend" runat="server" Text="Send" ToolTip="Send "
Visible="false" Font-Bold="True" OnClick="btnSendResume_Click" />
<asp:Button ID="btnDown" runat="server" Text="Download IDs" ToolTip="follow-up"
Visible="false" Font-Bold="True" OnClick="btnDownloadEmailIDs_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="SendMailUpdatePanel">
<ProgressTemplate>
<div id="blur" style="position:fixed; top:0px; bottom:0px; left:0px; right:0px; overflow:hidden; padding:0; margin:0; background-color:black; filter:alpha(opacity=50); opacity:0.5; z-index:1000;" />
<div id="progress" style="position:fixed; top:30%; left:43%; width:14%; z-index:1001; background-color:white; border:solid 1px black; padding:5px; text-align:center;">
<b>Mail in progress.Please Wait...</b>
<br />
<br />
</div>
</ProgressTemplate>
</asp:UpdateProgress>