i have an ajax modalpopupextender that opens a popup in the event that an error occurs.
This works fine in all browsers i have tested so far. But not in internet explorer 7 (it does in ie 8 and 9)
basically the height of the panel isnt being applied. on screen its about 20 pixels high. I have no idea why and have used various samples to no avail for hours now. The width os working fine.
Any help appreciated
Thanks
Damo
HTML
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="myapp.Logon" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="assets/css/Logon.css" rel="stylesheet" type="text/css" />
<link href="assets/css/modalBackground.css" rel="stylesheet" type="text/css" />
<title>myapp Login</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<ContentTemplate>
<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtenderError" runat="server"
TargetControlID="PanelLogonDetails">
</ajaxToolkit:RoundedCornersExtender>
<asp:Panel ID="PanelLogonDetails" runat="server" Width="350" Height="300" BorderColor="White" BackColor="White">
<div id="container">
<asp:Label ID="LabelLogo" runat="server" Text="Logo"></asp:Label>
<br />
<div id="inputcontainer">
<asp:Label ID="lblUsername" runat="server" Text="Username"></asp:Label>
<br />
<asp:TextBox CssClass="Textbox" ID="txtUserName" runat="server" Text="Administrator"
ToolTip="Username" Width="200px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidatorUsername" runat="server" ErrorMessage="You must enter a Username"
ControlToValidate="txtUserName" ForeColor="White"></asp:RequiredFieldValidator>
<br />
<asp:Label ID="lblPassword" runat="server" Text="Password"></asp:Label>
<br />
<!-- TextMode set to singleline for testing - set to Password for production-->
<asp:TextBox CssClass="Textbox" ID="txtPassword" runat="server" Text="!password£$nmj5%$-12"
ToolTip="Password" TextMode="SingleLine" Width="200px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidatorPassword" runat="server" ErrorMessage="You must enter a password"
ControlToValidate="txtPassword" ForeColor="White"></asp:RequiredFieldValidator>
<br />
<br />
<asp:Button CssClass="Button" ID="btnLogin" runat="server" Text="Login" OnClick="btnLogin_Click" />
<br />
<br />
</div>
</div>
</asp:Panel>
<!-- Error Modal Form -->
<asp:HiddenField ID="hideForModal" runat="server" />
<ajaxToolkit:ModalPopupExtender runat="server" ID="ErrorModal" BehaviorID="modalPopupExtenderError"
TargetControlID="hideForModal" PopupDragHandleControlID="popUpPaneError" PopupControlID="popUpPaneError"
OkControlID="btnOk" BackgroundCssClass="modalBackground" DropShadow="False" Drag="true">
</ajaxToolkit:ModalPopupExtender>
<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="popUpPaneError">
</ajaxToolkit:RoundedCornersExtender>
<asp:Panel ID="popUpPaneError" runat="server" CssClass="confirm-dialog" Width="485" Height="285" BackColor="White">
<div id="ErrorInputContainer">
<div>
<b>Error Code:</b></div>
<asp:Label ID="lblErrorCode" runat="server" Text="Error Code"></asp:Label>
<div>
<b>Error Message:</b></div>
<asp:Label ID="lblErrorMessage" runat="server" Text="Error Message"></asp:Label>
<div>
<b>Ex message:</b></div>
<asp:Label ID="lblExMessage" runat="server" Text="Ex Message"></asp:Label>
<br />
<asp:Button ID="btnOk" runat="server" Text="Ok" CssClass="Button" />
<br />
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="close" OnClientClick="$find('modalPopupExtenderError').hide(); return false;" />
</div>
</asp:Panel>
<!-- End Error Modal Form -->
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Logon.css
#PanelLogonDetails
{
background-color:#FFFFFF;
width: 350px;
height: 300px;
position:absolute;
left: 40%;
top: 40%;
margin-left: -50px;
margin-top: -50px;
}
/* main div */
#container
{
padding-left:50px;
padding-top:20px;
}
#LabelLogo
{
font-family: Arial, Sans-Serif;
font-size: 20px;
font-weight: bold;
}
/* end main div */
/* inputcontainer (within the main div above) */
#inputcontainer {
position:absolute;
height:100px;
width:230px;
left: 35%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
/* End inputcntainer */
html,body {
margin:0px;
padding:0px;
font-family: Arial, Helvetica, sans-serif;
font-size:13px;
line-height:1.5em;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003366', endColorstr='#FFFFFF'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#036), to(#FFF)); /* for webkit browsers */
background: -moz-linear-gradient(top, #036, #FFF); /* for firefox 3.6+ */
height: 100%;
}
/* Error Modal */
#ErrorInputContainer
{
background-color:White;
background:white;
position:absolute;
height:260px;
width:460px;
top:20px;
left:20px;
color:Black;
}
#popUpPaneError
{
height:260px;
width:460px;
}
/* End Error Modal */
/* TextBox */
.Textbox
{
width:auto;
padding:2px;
color:Black;
text-align:left;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
font-size: 10pt;
font-family: Arial;
}
.Textbox:focus
{
background-color:#FFCC33;
}
/* End TextBox */
/* Button */
.Button
{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
text-align:left;
padding-left:22px;
background-repeat: no-repeat;
background-image: url(/assets/img/action.gif);
background-position:3px 50%
}
.Button:hover
{
background: #FFCC33;
background-repeat: no-repeat;
background-image: url(/assets/img/action.gif);
background-position:3px 50%
}
/* End Button */
modalBackground.css
.modalBackground
{
background-color:#696969;
filter: alpha(opacity=60);
opacity: 0.6;
}
.close {
DISPLAY: block;BACKGROUND: url(img/close.png) no-repeat 0px 0px;
LEFT: -5px;WIDTH: 26px;TEXT-INDENT: -1000em;POSITION: absolute;
TOP: -7px;HEIGHT: 26px;
}
.modalBackground {
background-color:Gray;filter:alpha(opacity=70);opacity:0.7;
}
http://www.mindfiresolutions.com/Workaround-for-Modal-Popup-with-RoundedCornerExtender-issue-833.php
this is the solution. Bug with the ajax controltoolkit....
thanks
Damo
Related
I've run into a problem while trying to style a content page. I created a content Page that have buttons in it and for some reason after I linked a styleSheet the buttons stopped working.
I would appreciate any help, thank u.
the content page:
<%# Page Title="" Language="C#" MasterPageFile="~/Pages/Site1.Master" AutoEventWireup="true" CodeBehind="MyBooks.aspx.cs" Inherits="WebApplication8.Pages.MyBooks" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="../css/myBooks.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div>
<asp:Button CssClass="addBook" ID="addBook" runat="server" Text="+Add book"
onclick="addBook_Click" />
<center><asp:DataList ID="DataList1" runat="server" Font-Bold="False"
Font-Italic="False" Font-Overline="False" Font-Strikeout="False"
Font-Underline="False" ForeColor="Gray">
<ItemTemplate>
<table class="style1">
<tr>
<td class="td">
<asp:Image CssClass="binding" ID="Image2" runat="server"
ImageUrl='<%# Bind("binding")%>'/>
<asp:Label ID="bookName" CssClass="bookName" runat="server" Text='<%# Bind("BookName") %>'></asp:Label>
</td>
<td>
<br />
<br />
<div class="buttons">
<asp:Button CssClass="btn1" ID="Publish" runat="server" Text="Publish" /><br />
<asp:Button CssClass="btn2" ID="Edit" runat="server" Text="Edit" /><br />
<asp:Button CssClass="btn2" ID="discared" runat="server" Text="discared" />
</div>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList></center>
</div>
</asp:Content>
the styleSheet (linked in the first content place holder):
addBook is the cssClass of the first butoon in the content page
btn1 is the cssClass of the first button in the DataList.
btn2 is the cssClass of the tow other buttons below it.
buttons is the cssClass of the div who contains the three buttons inside the DataList.
body
{
}
.btn1
{
border-style: none;
width:200px;
height:40px;
border-radius:15px;
background-color:#d4fcea;
color:White;
font-family:Calibri;
margin-bottom:10px;
font-size:20px;
}
.btn2
{
border-style: none;
width:200px;
height:40px;
border-radius:15px;
background-color:#d5e0db;
color:White;
font-family:Calibri;
margin-bottom:10px;
font-size:20px;
}
.buttons
{
position:relative;
left:30%;
z-index:-1;
}
.style1
{
margin-top:20px;
width:800px;
height:250px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 3px 20px 0 rgba(0, 0, 0, 0.15);
border-radius:10px;
margin-left: auto;
margin-bottom: 0;
position:relative;
z-index:-1;
}
.addBook
{
border-style: none;
position:relative;
left:20%;
width:200px;
height:40px;
border-radius:15px;
background-color:#ffcc99;
color:White;
font-family:Calibri;
margin-bottom:10px;
font-size:20px;
right:25%;
z-index:-1;
}
everybody
there's something weird in my webpage as it automatically adds new line after each controller
<asp:Label ID="ll" Class="question_bold" runat="server" Text="label 1" Visible="false"></asp:Label>
<asp:RequiredFieldValidator runat="server" id="lln" controltovalidate="Textbox" errormessage="* Required" Font-Bold="True" ForeColor="Red" SetFocusOnError="True" Display="Dynamic" />
<asp:TextBox ID="Textbox" runat="server" Visible ="false" Width="350px" ></asp:TextBox>
<asp:LinkButton ID="check" CssClass="myclass" visible="false" runat="server" OnClick="check_Click">Check</asp:LinkButton>
and here's CSS code:
a.myclass{ color: #FF0000; text-decoration: none; }
a.myclass:hover { text-decoration: none; }
.question_bold {
font-weight: bold;
border: 1px solid #e6e6e6;
border-radius: 10px;
background-color: #e6e6e6;
height: 25px;
width: 100%;
display: block;
}
i've tried changing display, and even removing the entire CSS from asp but still same
i need textbox, field validator, link button to be on same line....
any ideas ?!
The code below will line up the controls on one line. It uses CSS3 flexbox to line up the controls.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
a.myclass{ color: #FF0000; text-decoration: none; }
a.myclass:hover { text-decoration: none; }
.question_bold {
font-weight: bold;
border: 1px solid #e6e6e6;
border-radius: 10px;
background-color: #e6e6e6;
height: 25px;
width: 100%;
display: block;
}
.flex-container {
display: flex;
width: 650px;
height: 250px;
}
.flex-item {
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="flex-container">
<div class="flex-item"><asp:Label ID="ll" Class="question_bold" runat="server" Text="label 1"></asp:Label></div>
<div class="flex-item"><asp:RequiredFieldValidator runat="server" id="lln" controltovalidate="Textbox" errormessage="* Required" Font-Bold="True" ForeColor="Red" SetFocusOnError="True" Display="Dynamic" /></div>
<div class="flex-item"><asp:TextBox ID="Textbox" runat="server" Width="350px" ></asp:TextBox></div>
<div class="flex-item"><asp:LinkButton ID="check" CssClass="myclass" runat="server" OnClick="check_Click">Check</asp:LinkButton></div>
</div>
</form>
</body>
</html>
The solution above requires the browser supports CSS3 flexbox. Can you set the widths of each control? This can also be done using CSS. The solution below works for me across the different browsers.
<div>
<span><asp:Label ID="ll" Class="question_bold" runat="server" Text="label 1" Width="100px"></asp:Label></span>
<span><asp:RequiredFieldValidator runat="server" id="lln" controltovalidate="Textbox" errormessage="* Required" Font-Bold="True" ForeColor="Red" SetFocusOnError="True" Display="Dynamic" /></span>
<span><asp:TextBox ID="Textbox" runat="server" Width="350px" ></asp:TextBox></span>
<span><asp:LinkButton ID="check" CssClass="myclass" runat="server">Check</asp:LinkButton></span>
</div>
<html>
<head>
<title> </title>
</head>
<body>
<table class="format1" width="740px" cellpadding="2" cellspacing="0">
<tr>
<td>
<asp:Label ID="ll" Class="question_bold" runat="server" Text="label 1" Visible="false"></asp:Label>
<asp:RequiredFieldValidator runat="server" ID="lln" ControlToValidate="Textbox" ErrorMessage="* Required" Font-Bold="True" ForeColor="Red" SetFocusOnError="True" Display="Dynamic" />
</td>
<td>
<asp:TextBox ID="Textbox" runat="server" Visible="false" Width="350px"></asp:TextBox>
</td>
<td>
<asp:LinkButton ID="check" CssClass="myclass" Visible="false" runat="server" OnClick="check_Click">Check</asp:LinkButton>
</td>
</tr>
</table>
</body>
</html>
If I display my page in design view it looks exactly like I want it to, but when I debug the page does not display as it should. The grid will extend past the bottom of the page. What do I need to do to make my "design" view of my page look just like my "debug" view of my page?
Here is my site.master syntax that works great on all but 3 pages (I have over 200 in my project).
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.Master.cs" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head id="Head1" runat="server">
<title>Test</title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css' />
</head>
<body>
<form id="Form1" runat="server">
<asp:ScriptManager ID="sptScriptManager" runat="server">
</asp:ScriptManager>
<div class="page">
<div class="header">
<div>
<table class="Color3" cellspacing="0" cellpadding="0" width="100%">
<!--Table showing all the menu information-->
</table>
<div class="White" style="height: 14px;"></div>
<div class="main" id="divMain">
<asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>
</div>
<div class="Color1" style="height: 40px; margin-top:50px;">
</div>
</div>
</div>
</div>
<div class="Color2" style="height: 300px;">
<div style="text-align: center;">
<br />
<asp:Label runat="server" ID="lblhaeia" CssClass="CustomBold"></asp:Label>
</div>
</div>
</form>
</body>
</html>
And this is on the page how I am calling it. In design view everything looks as it should, but If I run this page in debug the grid spans down past the bottom of the </asp:Content> tag
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
<asp:DataGrid runat="server" ID="asd" AutoGenerateColumns="false"
GridLines="Both" ShowFooter="true" Visible="false" OnItemDataBound="asd_OnItemDataBound">
<ItemStyle CssClass="row" /><FooterStyle CssClass="DataGridFooters" /><HeaderStyle CssClass="DataGridHeaders" />
<Columns>
<asp:BoundColumn DataField="123" HeaderText="123" ItemStyle-Width="137px">
</asp:BoundColumn>
<asp:BoundColumn DataField="erf" HeaderText="erf"></asp:BoundColumn>
<asp:BoundColumn DataField="mmm" HeaderText="mmm"></asp:BoundColumn>
<asp:BoundColumn DataField="acxz" HeaderText="axcz" DataFormatString="{0:N}"
HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"></asp:BoundColumn>
<asp:BoundColumn DataField="qaz" HeaderText="qaz"
DataFormatString="{0:N}" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
</asp:BoundColumn>
<asp:BoundColumn DataField="b" HeaderText="b" HeaderStyle-HorizontalAlign="Center"
ItemStyle-HorizontalAlign="Center"></asp:BoundColumn>
<asp:BoundColumn DataField="tt" HeaderText="tt" HeaderStyle-HorizontalAlign="Center"
ItemStyle-HorizontalAlign="Center"></asp:BoundColumn>
<asp:BoundColumn DataField="nnne" HeaderText="nnne" HeaderStyle-HorizontalAlign="Center"
ItemStyle-HorizontalAlign="Center"></asp:BoundColumn>
<asp:BoundColumn DataField="flam" HeaderText="flam"
HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"></asp:BoundColumn>
</Columns>
</asp:DataGrid>
</asp:Content>
And finally the CSS that may or may not be skewing this stuff
.Color1
{
background-color: #689e1c;
background-repeat: repeat-x;
height: 55px;
}
.Color2
{
background-color: #333881;
padding: 0px 0px 0px 0px;
height: 20px;
display: block;
}
.Color3
{
background-color: #001199;
padding: 0px 0px 0px 0px;
}
.CustomBold
{
font-family: 'Open Sans', sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
color: white;
}
.White
{
background-color: #ffffff;
padding: 0px 0px 0px 0px;
height: 40px;
}
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 200px;
max-height: auto;
}
.body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
}
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 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>