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"
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>
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.
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>
I am trying to create rounded corners on my divs. I am using the standard template in an ASP.NET MVC 3 application.
I have followed this guide:
http://viralpatel.net/blogs/2009/08/rounded-corner-css-without-images.html
basicly you put this in your css file:
#selector {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
and
<div id="selector">
Why does my site not show rounded corners on my divs? I have tried with Firefox and Chrome.
You forgot to specify a border!
You need to change your CSS to this in order to display the border:
#selector {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid black;
}
in asp.net its easy to implement rounded corner to panels using ajax, try the following:
<%# Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</ajaxToolkit:ToolkitScriptManager>
</div>
<asp:Panel ID="Panel1" runat="server" BackColor="AppWorkspace" Height="188px" Width="271px">
</asp:Panel>
<ajaxToolkit:RoundedCornersExtender ID="Panel1_RoundedCornersExtender"
runat="server" Enabled="True" TargetControlID="Panel1" Radius="15">
</ajaxToolkit:RoundedCornersExtender>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
#t2
{
width: 87px;
top: 49px;
left: -566px;
}
#t1
{
width: 87px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="height: 171px; width: 391px">
<div id="Div2" style="position:absolute; top: 65px; left: 14px;">
sdsdf<br />
asfaesrestret<br />
asf<br />
asdfas<br />
asdfaasdfasfsad<br />
hhb<br />
jh</div>
<div id="t1" style="position:absolute; top: 65px; left: 111px;">
yyyyyyyyyyyyy
</div>
<div id="Div1"
style="position: absolute; width: 87px;position:absolute; top: 168px; left: 12px;">
xxxxxxxxxxxxxxx
</div>
</div>
</form>
</body>
</html>
Hi, Im new to css, Please help me on how to increase the height dynamically on giving more data in Div2 ?? The height of main div also need to increased. I have set position to absolute, am not sure wat to give there to move the div as per increase in data on Div2. please suggest ?? Thanks in advance.
-Srini
I would suggest you to use a div wrapper for your two divs and to use percentages instead of fixed values for the height.
EDIT:
Do the following then:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
#t2
{
width: 87px;
top: 49px;
left: -566px;
}
#t1
{
width: 87px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="height: 171px; width: 391px">
<div id="wrapper" style="position:absolute;">
<div id="Div2" style="top: 65px; left: 14px; background: red;">
sdsdf<br />
asfaesrestret<br />
asf<br />
asdfas<br />
asdfaasdfasfsad<br />
hhb<br />
jh</div>
<div id="t1" style="position:absolute; top: 65px; left: 111px;">
yyyyyyyyyyyyy
</div>
<div id="Div1"
style="width: 87px;position:relative; top: 0px; left: 12px; background: green;">
xxxxxxxxxxxxxxx
</div>
</div>
</div>
</form>
</body>
</html>
I set the background colors to the divs so you will see what I mean.
Essentially, I added a wrapping div with position absolute. The Div1 and Div2 are now relative. The Div1 has a top:0 attribute, not to leave any gap with Div2.
Works crossbrowser replace the 100 for what you want to be the default height
min-height: 100px; height: auto !important; height: 100px;
You can use JavaScript to change Element properties dynamically.
For example
document.getElementById("Div1").style.width= "900";