When i type in either of the textboxes i get little circles appearing instead of text. Why is this happening and how do i stop it?
Code is as follows:
HTML:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="MainPage.aspx.cs" Inherits="Foods.MainPage" %>
<!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">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link id="Link1" rel="stylesheet" type="text/css" href="Styles/mainStyle.css"/>
</head>
<body>
<form id="form1" runat="server">
<div class = "userIDTboxDiv">
<div class = "userIDTboxText">
Enter User ID:
</div>
<asp:TextBox id="userIDBox" TextMode="password" runat="server" Height="52px"
Width="200px" />
</div>
<div class = "passwordTboxDiv">
<div class = "passwordTboxText">
Enter User Password:
</div>
<asp:TextBox id="TextBox1" TextMode="password" runat="server" Height="52px"
Width="200px" />
</div>
</form>
</body>
CSS:
body
{
text-decoration:none;
background: white;
}
input
{
margin-left: 0px;
margin-top: 7px;
}
.userIDTboxDiv
{
padding-top: 20%;
padding-left: 45%;
width: 15%;
height: 30%;
}
.userIDTboxText
{
padding-left: 17%;
height: auto;
width:203px;
}
.passwordTboxDiv
{
padding-top: 2%;
padding-left: 45%;
width: 15%;
height: 111px;
}
.passwordTboxText
{
padding-left: 10%;
height: auto;
width:203px;
}
I would guess this has something to do with it:
TextMode="password"
in your <asp:TextBox> elements. Remove the TextMode or change them to:
TextMode="SingleLine"
which happens to be the default.
Related
FileUpload control is rendering differently in different browsers. In the Firefox, it's showing Browse/No file selected while in Chrome Choose File/No file chosen. Is there a way to display the File Upload in the same way irrespective of browser. My ASP.NET Code and screenshots are attached below:
<asp:Label runat="server" ID="lblFileName" AssociatedControlID="fileUploader"></asp:Label>
<asp:FileUpload ID="fileUploader" runat="server" Width="350" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" />
Firefox
Chrome
If you want consistent Button Look-And-Feel....you will need to apply the style you wish it to be.
You are using the Default Browser CSS styles. Check your Developer Tools for the associated browser to see how the Look-And-Feel of the controls is being rendered.
try following code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Uploader Demo</title>
<script src="Scripts/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
function hookFileClick() {
// Initiate the File Upload Click Event
document.getElementById('fileUploader').click();
}
function fnOnChange(obj)
{
document.getElementById("txtUploadFile").value = obj.value;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" runat="server"
id="txtUploadFile" disabled="disabled" />
<input type="button" runat="server"
id="btnUpload" value="Browse"
onclick="hookFileClick()" />
<asp:Button runat="server"
ID="btnUploadFileToServer"
Text="Upload File To Server"
OnClick="btnUploadFileToServer_Click" />
<asp:FileUpload runat="server"
ID="fileUploader" Style="visibility: hidden;"
onchange="fnOnChange(this);" />
</div>
</form>
</body>
</html>
C#
protected void btnUploadFileToServer_Click(object sender, EventArgs e)
{
string strFileName = fileUploader.FileName;
fileUploader.SaveAs("d:\\Somepath\\ " + strFileName);
}
Thank you very much #GoldBishop for giving me some hint to write custom css and the following css worked for me.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.upload-btn-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
}
.btn {
border: 2px solid gray;
color: gray;
background-color: white;
padding: 8px 20px;
border-radius: 8px;
font-size: 20px;
font-weight: bold;
}
.upload-btn-wrapper input[type=file] {
font-size: 100px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="upload-btn-wrapper">
<asp:Label runat="server" ID="lblFileName" AssociatedControlID="fileUploader"></asp:Label>
<asp:FileUpload ID="fileUploader" runat="server" Width="350" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" CssClass="btn" />
</div>
</form>
</body>
</html>
I am starting to study ASP.NET with the book "Beginning ASP.NET 4 : in C# and VB" (Imar Spaanjaars - Wrox). Right now I am stuck on "Try It Out" section on page 79: every thing went right except there is no background color for the side bar where it's expected to be gray.
My page:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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">
<title></title>
<style type="text/css">
.style1
{
color: #663300;
}
.style2
{
color: #FF0066;
}
</style>
<link href="Styles/Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="PageWrapper">
<div id="Header">
Header Goes Here
</div>
<div id="MenuWrapper">
Menu Goes Here
</div>
<div id="MainContent">
<h1>
Hi there visitor and welcome to Planet Wrox</h1>
<p>
We're glad you're <span class="style2">paying a visit</span><span class="style1">
</span>to www.PlanetWrox.com, the coolest
music community site on the Internet.</p>
<p>
Feel free to have a look around; there are lots of interesting <strong>reviews and concert
pictures </strong>to be found here.</p>
</div>
<div id="SideBar">
Sidebar Goes Here</div>
<div id="Footer">
Footer Goes Here
</div>
</div>
</form>
</body>
</html>
CSS file:
#Header
{
background-color: #C0C0C0;
width: 844px;
height: 86px;
}
*
{
font-family: Arial;
}
h1
{
font-size: 20px;
}
#PageWrapper
{
width: 844px;
}
#MenuWrapper
{
width: 844px;
}
#MainContent
{
width: 664px;
float: left;
}
#Sidebar
{
background-color: Gray;
width: 180px;
float: left;
}
#Footer
{
background-color: #C0C0C0;
width: 844px;
clear: both;
}
Result (the sidebar background is expected to be gray):
Did I make any mistake, can any one tell me where it is?
"Sidebar" != "SideBar"
It is case sensitive
I need to center align a panel. I use the following:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="TestDefault.aspx.cs" Inherits="tregware.TestDefault" %>
<!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">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:Panel ID="Root" runat="server" BackColor="Red" HorizontalAlign="Center" Style="left: 0px; top: 0px; width: 100%; height: 100%; position: absolute; z-index: 0;">
<asp:Panel ID="Body" runat="server" BackColor="Blue"
Style="left: 0px; top: 24px;width: 800px; height: 100%; position: absolute; z-index: 0;"
HorizontalAlign="Center">
</asp:Panel>
</asp:Panel>
</form>
</body>
</html>
However the panel ("Body") will not center. How would I do so?
You've set position: absolute, so a lot of the regular methods you would use to center elements probably won't work.
Since you've set a fixed width of 800px, you could use:
Style="left: 50%; margin-left: -400px; ..."
Panel has the property of HorizontalAlign
<asp:Panel id="reqId" runat="server" HorizontalAlign="center" >
Your Text Here
</asp:Panel>
Create a css called .panel { align:center }
and then add it to the panel CssClass = "panel"
My (very simple) test code correctly centers in Chrome & Firefox ( http://i.imgur.com/5vCoV.png ), but does not appear correctly in Safari. Instead, it looks like this: http://i.imgur.com/qDq9M.png
I've only tested on a Mac.
Here is my code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#charset "utf-8";
body {
background-color: #ccc;
font-family: Verdana, Geneva, sans-serif;
height: auto;
width: auto;
font-size: 80%;
margin: 0;
padding: 0;
}
#main {
text-align: center;
}
</style>
</head>
<body>
<CFIF NOT ISDEFINED("FORM.SUBMIT")>
<div id="main">
<cfform format="flash" action="" skin="haloorange" width="798" height="540" style="background-color: ##999999; margin-top:8px; margin-left: 38px;">
<cfformgroup type="panel" label="APPLICATION" width="790" style="background-color:##DDDDDD">
<CFINPUT label="First Name" TYPE="Text" NAME="fname" MESSAGE="First Name required." value="Ahmed" REQUIRED="Yes" tooltip="Enter your first name." width="298">
<CFINPUT label="Last Name" TYPE="Text" NAME="lname" MESSAGE="Last Name required." value="Osman" REQUIRED="Yes" tooltip="Enter your last name." width="298">
<CFINPUT TYPE="submit" width="49" NAME="submit" value="Submit" tooltip="Save your name.">
</cfformgroup>
</cfform>
</div>
<CFELSE>
<cfdump var="#FORM#">
</CFIF>
</body>
</html>
Edit:
Here is the rendered HTML code, thanks reiso:
<!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><script type="text/javascript" src="/CFIDE/scripts/cfform.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/masks.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#charset "utf-8";
body {
background-color: #ccc;
font-family: Verdana, Geneva, sans-serif;
height: auto;
width: auto;
font-size: 80%;
margin: 0;
padding: 0;
}
#main {
padding: 0;
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<script type="text/javascript" charset='utf-8' src='/CFIDE/scripts/cfformhistory.js'> </script>
<noscript>
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'
id='CFForm_1'
codebase='http://www.macromedia.com/go/getflashplayer#version=7,0,14,0'
width='798'
height='540'>
<param name='wMode' value='Window'/>
<param name='src' value='/zip/1613302191.mxml.cfswf'/>
<param name='flashVars' value='%5F%5FCFForm%5F1%5Fcacheid=ED542456%2DBAD9%2DED93%2DE8B94655D75F224D'/>
<embed pluginspage='http://www.macromedia.com/go/getflashplayer' id='CFForm_1' src='/zip/1613302191.mxml.cfswf' width='798' height='540' wMode='Window' flashVars='%5F%5FCFForm%5F1%5Fcacheid=ED542456%2DBAD9%2DED93%2DE8B94655D75F224D' ></embed> </object>
</noscript>
<script type="text/javascript" charset='utf-8' src='/CFIDE/scripts/CF_RunActiveContent.js'></script>
<script type="text/javascript" charset='utf-8'>
CF_RunContent('<object classid=\'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\' codebase=\'http://www.macromedia.com/go/getflashplayer#version=7,0,14,0\' width=\'798\' height=\'540\'>\n <param name=\'src\' value=\'/zip/1613302191.mxml.cfswf\'/>\n <param name=\'wMode\' value=\'Window\'/>\n <param name=\'flashVars\' value=\'historyUrl=%2FCFIDE%2Fscriptscfformhistory%2Ecfm%3F&lconid=" + lc_id +"&%5F%5FCFForm%5F1%5Fcacheid=ED542456%2DBAD9%2DED93%2DE8B94655D75F224D\'/>\n<embed pluginspage=\'http://www.macromedia.com/go/getflashplayer\' \n id=\'CFForm_1\' \n src=\'/zip/1613302191.mxml.cfswf\' \n width=\'798\' \n height=\'540\' \n wMode=\'Window\' \n flashVars=\'historyUrl=%2FCFIDE%2Fscriptscfformhistory%2Ecfm%3F&lconid=" + lc_id +"&%5F%5FCFForm%5F1%5Fcacheid=ED542456%2DBAD9%2DED93%2DE8B94655D75F224D\' >\n</embed>\n</object>\n');
</script>
<script type="text/javascript" charset='utf-8'>
document.write("<br><iframe src='/CFIDE/scripts/cfformhistory.cfm' name='_history' frameborder='0' scrolling='no' width='22' height='0'></iframe></br> ");
</script>
</div>
</body>
</html>
Thanks
have not tested it, but try this as your #main style:
#main {
width: 798px; /* same as your cfform's width value */
padding: 0;
margin: 0 auto; /* this shoudl center the container on the page */
}
and REMOVE all margin-* declarations from the style attribute in your cfform tag
I'm somewhat new to html and css and I am having a really strange issue with this ASP.NET page. The following code draws the div (should be 50x50) as 50x100 in IE9. It may be drawing twice. In Compatibility mode it works just fine. As you can see it's a super-simple piece of code.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DivAlignmentTest.Default" %>
<!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">
<title></title>
<style type="text/css">
html, body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#Div1
{
width: 50px;
height: 50px;
background-color: Red;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="Div1" />
</form>
</body>
</html>
Any help would be appreciated,
Jason
Change
<div id="Div1" />
to
<div id="Div1"></div>
should make it work properly.
You cant self close a div tag
Try:
<div id="Div1"></div>