I have a styling problem
I am trying to align a button with the first column of a gridview which is right underneath.
Something like this:
I've done the following but obviously it will fail with different resolutions:
<div class="formsFormBlock">
<asp:Label ID="LblRecurError" runat="server" />
<div style="text-align: left; position: relative; left: -15%;">
<table style="border: 0">
<tr>
<td style="border: 0">
<asp:Button ID="btnRecur" runat="server" Text="Repeat" />
</td>
</tr>
</table>
</div>
<asp:GridView>
</asp:GridView>
How can i do this?
Addition:
the gridview doesn't have a cssclass but the div above has the following css attributes:
.formsFormBlock{clear:both;position:relative;border-bottom:1px solid #e8f1f7;padding:0.53em 0.83em}
.formsFormBlock .formsItemLabel{display:block;width:25%;float:left;position:relative}
.formsFormBlock .formsItemLabel em{position:absolute;/*right:1.66em*/color:#ff0000}
.formsFormBlock .formsFormBlockHint{color:#999;font-size:92%;}
#formsFormHd:after, .formsFormBlock:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
#formsFormHd, .formsFormBlock{display:block;clear:both;}
*:first-child+html #formsFormHd, *:first-child+html .formsFormBlock{display:inline-block;}
Try this
<div class="formsFormBlock">
<div style="text-align: left; position: relative; left: -15%;">
<table style="border: 0">
<tr>
<td style="border: 0">
<asp:Button ID="btnRecur" runat="server" Text="Repeat" />
<asp:Label ID="LblRecurError" runat="server" />
</td>
</tr>
</table>
</div>
<asp:GridView>
</asp:GridView>
<div id="container">
<div style="float: left; margin-bottom: 10px;">
<asp:Label ID="LblRecurError" runat="server" />
<br />
<asp:Button ID="btnRecur" runat="server" Text="Repeat" />
</div>
<div style="clear: left;">
<asp:GridView runat="server">
</asp:GridView>
</div>
</div>
cheers
Related
So previously my login worked fine. And then I made some edits and it stopped working. Here are the edits I made to my website in between it going from working to not working.
I was trying to make a submit content page but I kept getting errors about not being able to contain a form inside a form. So I went over to my master page and removed the form tag and then added all the form tags I needed into each individual page. In the end I ended up removing all form tags and putting a single form tag around the content place holder in the master page.
I added a new table to my SQL database to store content submitted by users. I use Microsoft Server Express for my database.
The error I am getting is not an error in my console, it is just that my PostBackURL is loaded with out anything happen. Even if I enter a correct login (I have checked and the login info I tested is stored in my database), it will just automatically load the PostBackURL with no login occuring, nor any Login failed messages.
Web Config:
<configuration>
<system.web>
<compilation debug="true" targetFramework="4.5.2" />
<httpRuntime targetFramework="4.5.2" />
<authentication mode="Forms">
<forms loginUrl="login.aspx" name=".ASPXFORMSAUTH">
</forms>
</authentication>
</system.web>
<appSettings>
<add key="ValidationSettings:UnobtrusiveValidationMode" value="None" />
</appSettings>
</configuration>
Master Page (Relevant Parts):
<body>
<form id="form1" runat="server">
<div class="header headerLogin">
<img style="margin-left: 5vw; margin-top: 5px; height: 32px; width: 130px;" src="images/inshortlogo.png" />
<p class="taskbarLinks">
HOME
NEWS
JOB LISTINGS
STUDY
LOGIN
</p>
<script>
...
</script>
</div>
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
Login Page:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div class="Absolute-Center">
<asp:LoginView ID="LoginView1" runat="server">
<AnonymousTemplate>
<asp:Login ID="Login1" runat="server">
<LayoutTemplate>
<table cellpadding="1" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td>
<table cellpadding="0">
<tr>
<td align="center" colspan="2">Log In</td>
</tr>
<tr>
<td align="right">
<asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">User Name:</asp:Label>
</td>
<td>
<asp:TextBox ID="UserName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName" ErrorMessage="User Name is required." ToolTip="User Name is required." ValidationGroup="ctl08$Login1">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td align="right">
<asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password">Password:</asp:Label>
</td>
<td>
<asp:TextBox ID="Password" runat="server" TextMode="Password"></asp:TextBox>
<asp:RequiredFieldValidator ID="PasswordRequired" runat="server" ControlToValidate="Password" ErrorMessage="Password is required." ToolTip="Password is required." ValidationGroup="ctl08$Login1">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td colspan="2">
<asp:CheckBox ID="RememberMe" runat="server" Text="Remember me next time." />
</td>
</tr>
<tr>
<td align="center" colspan="2" style="color:Red;">
<asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal>
</td>
</tr>
<tr>
<td align="right" colspan="2">
<asp:Button ID="LoginButton" runat="server" CommandName="Login" CssClass="button" PostBackUrl="~/home.aspx" Text="Log In" ValidationGroup="ctl08$Login1" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</LayoutTemplate>
</asp:Login>
<br />
<div style="text-align: center;">
<a class="button" style="margin-right: 2em;" href="signup.aspx">Register</a>
<a class="button" href="forgotpassword.aspx">Forgot Password</a>
</div>
</AnonymousTemplate>
<LoggedInTemplate>
<asp:Label ID="logOutLabel" runat="server" Text=""></asp:Label>
<br />
<br />
<div style="text-align: center;">
<asp:LinkButton ID="logOutButton" runat="server" class="button" OnClick="logOutButton_Click">Log Out</asp:LinkButton>
</div>
</LoggedInTemplate>
</asp:LoginView>
</div>
<style>
.Absolute-Center {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
</style>
</asp:Content>
Thanks in advance!
Remove the postbackurl. That posts the form to another page, so of course you don't get logged in. Instead, upon successful login, perform a redirect to whatever page you want.
I have a popup window which has a multiline textbox with 2 buttons under that. A Cancel and a Save.
I have:
<div style="width: 650px;">
<div style="padding-top: 10px; text-align: center">
<asp:TextBox ID="TxtTest" Width="530px" TextMode="MultiLine" Style="word-wrap: break-word; height: 200px; overflow: auto; vertical-align: top" runat="server" AutoComplete="off" />
<asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender2" WatermarkCssClass="textwatermarkNotes" TargetControlID="TxtOther" WatermarkText="Please enter a message here..." runat="server" />
</div>
<div style="margin-top: 10px; margin-bottom: 10px; text-align: center;">
<asp:Button ID="BtnCancel" OnClick="btnCancel_click" CssClass="buttonSmall" CausesValidation="false" Text="Cancel" runat="server" OnClientClick="EncodeText()" />
<asp:Button ID="BtnSave" runat="server" CssClass="buttonSmall" Text="Save" OnClick="btnSave_Click" />
</div>
<div>
<asp:Label Width="130px" ID="txtCharMax" Text="" runat="server" />
</div>
</div>
I have in the code-behind to say like "100 character max". But I want the Cancel and Save centered and the "100 character max" to the right of the Save.
On the 4th DIV I thought I could do something like:
<div style="float:left">
<asp:Label Width="130px" ID="txtCharMax" Text="">
</div>
But that didn't work.
What is the best/easiest way to do this? Leaving CSS out but using the Style tag?
Try something like this:
<div style="text-align: center;">
<button style="margin-left:100px">cancel</button>
<button>save</button>
<span style="display:inline-block;width:100px;">
TEXT
</span>
</div>
Making the text inline-block allows it to align alongside the buttons. Then giving it a width allows us to use margin-left on the left button to shunt it along right by the same amount so that the buttons appear centrally.
I have two labels and two text boxes and I want put those control on a line without position absolute
<div id="divlbluser" >
<asp:Label CssClass="lbl" ID="lblUser" runat="server" Text="نام کاربری:"></asp:Label>
</div>
<div id="divtxtuser" >
<asp:TextBox CssClass="txt" ID="txtUser" runat="server"></asp:TextBox>
</div>
<div id="divlblpass" >
<asp:Label CssClass="lbl" ID="lblPass" runat="server" Text="رمز عبور:"></asp:Label>
</div>
<div id="divtxtpass">
<asp:TextBox runat="server" CssClass="txt" ID="txtPass"></asp:TextBox>
</div>
Don't put them in separate divs.
<div>
<asp:TextBox CssClass="txt" ID="txtUser" runat="server"></asp:TextBox>
<asp:Label CssClass="lbl" ID="lblPass" runat="server" Text="رمز عبور:"></asp:Label>
<asp:TextBox runat="server" CssClass="txt" ID="txtPass"></asp:TextBox>
</div>
See example jsFiddle
Use CSS
<style>
#divtxtuser, #divlblpass, #divtxtpass { float: left; }
</style>
Here's my full code. I haven't modify my default css code. Does anyone know how to align nav bar to the right next to the logo? Please note I am currently learning visual basic web application building and my knowledge is very limited on this area.
thanks
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="default.aspx.vb" Inherits="Wiltshire_mobile._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
{
font-size: large;
}
.style2
{
text-align: right;
}
.style3
{
width: 162px;
height: 83px;
border-width: 0px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="style2">
<asp:Button ID="mysiteloginbutton1" runat="server" Text="My Site Login" BackColor="#FF9900"
ForeColor="White" Style="text-align: right" /> <span class="style1"><strong
style="text-align: left">Sign up | Help |<asp:DropDownList
ID="DropDownList1" runat="server" AutoPostBack="True">
<asp:ListItem>English</asp:ListItem>
<asp:ListItem>Bangla</asp:ListItem>
</asp:DropDownList>
</div>
<div>
<a href="http://www.wiltshire-mobile.com">
<img alt="Wiltshire mobile website logo" class="style3" src="Images/logo.PNG" /></a> <span class="style1"><strong
style="text-align: left">
<asp:Menu ID="Menu1" runat="server" StaticSubMenuIndent="16px">
<Items>
<asp:MenuItem Text="Home" Value="Home"></asp:MenuItem>
<asp:MenuItem Text="Features" Value="Features"></asp:MenuItem>
<asp:MenuItem Text="Tour" Value="Tour"></asp:MenuItem>
<asp:MenuItem Text="Plans" Value="Plans"></asp:MenuItem>
<asp:MenuItem Text="Blog" Value="Blog"></asp:MenuItem>
</Items>
</asp:Menu>
</strong></span>
<br />
<br />
Mobile image
<br />
</div>
</form>
</body>
</html>
I believe this is what you are trying to accomplish:
<body>
<table style="width: 100%">
<tr valign="middle">
<td colspan="2">
<span style="font-size: 16pt; font-family: Verdana">
<a href="http://www.wiltshire-mobile.com">
<img alt="Wiltshire mobile website logo" class="style3" src="Images/logo.PNG" /></a> <span class="style1"><strong style="text-align: left">
</span>
</td>
<td style="width: 80%">
</td>
</tr>
<tr valign="top">
<td style="width: 20%">
<asp:Button ID="mysiteloginbutton1" runat="server" Text="My Site Login" BackColor="#FF9900" ForeColor="White" Style="text-align: right" /> <span class="style1"><strong style="text-align: left">Sign up | Help |<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True">
<asp:ListItem>English</asp:ListItem>
<asp:ListItem>Bangla</asp:ListItem>
</asp:DropDownList>
</td>
<td style="width: 80%">
<asp:Menu ID="Menu1" runat="server" StaticSubMenuIndent="16px">
<Items>
<asp:MenuItem Text="Home" Value="Home"></asp:MenuItem>
<asp:MenuItem Text="Features" Value="Features"></asp:MenuItem>
<asp:MenuItem Text="Tour" Value="Tour"></asp:MenuItem>
<asp:MenuItem Text="Plans" Value="Plans"></asp:MenuItem>
<asp:MenuItem Text="Blog" Value="Blog"></asp:MenuItem>
</Items>
</asp:Menu>
<br />
<br />
#RenderBody
<br />
</td>
</tr>
</table>
</body>
Now, I added '#RenderBody', as this should be used as your "_LayoutPage" and then each page calls to this to show how it should be designed.
The basic concept is to design the site as a table and then separate each element into columns and rows of that table, as I did here. <td> and <tr> are used to separate these items.
If you wanted to go more into how things looked, you should have this page point to your site.css file. The css file should contain everything as it is regarded to positioning of text, color, layout for specific items (such as tables), etc. Hope this helps.
i've used a DataList (dlparent) control for one of my page. Inside that datalist is another Datalist (dlchild) that is being populated by itemdatabound event of the parent datalist. i've used css with dlchild.
Databinding is ok and the required output shows great with mozilla and IE but not in netscape, safari and google chrome. dlchild is not showing. only item in dlparent appears.
Here's the markup for the dlparent:
<asp:DataList ID="SprintsWorkData" Style="float: left; padding-top: 10px;" runat="server"
OnItemDataBound="SprintsWorkData_ItemDataBound">
<ItemTemplate>
<asp:HiddenField ID="hiddenSprintId" runat="server" Value='<%# Eval("SprintId") %>' />
<div id="SprintNameSection">
<h4>
<%# Eval("SprintName") %></h4>
</div>
<div id="HeaderSection_SelectAll">
<div style="padding-top: 3px; height: 23px; padding-left: 2px;">
<asp:CheckBox ID="isAllCheck" runat="server" onclick="checkAll(this)" />
<b>
<asp:Label ID="sAll" Style="color: Black; text-indent: 1px;" Text="Select All" runat="server"></asp:Label>
</b>
</div>
</div>
<div class="HeaderSection_WorkedHours">
<b><asp:Literal ID="workedHours" runat="server" Text='<%$ Resources:LanguagePack, Worked_Hours %>'></asp:Literal></b></div>
<div class="HeaderSection_BillableHours">
<b><asp:Literal ID="billableHours" runat="server" Text='<%$ Resources:LanguagePack, Billable_Hours %>'></asp:Literal></b></div>
<div class="HeaderSection_Comments">
<b><asp:Literal ID="comments" runat="server" Text='<%$ Resources:LanguagePack, Comments %>'></asp:Literal></b></div>
<asp:DataList ID="HoursWorkData" runat="server">
<ItemTemplate>
<asp:HiddenField ID="hiddenTaskId" runat="server" Value='<%# Eval("BacklogId") %>' />
<div id="ItemSection_Task_Header">
<div style="vertical-align: middle; padding-bottom: 2px; padding-left: 2px; height: 18px;">
<asp:CheckBox ID="checkboxSub" runat="server" onclick="checkAllSub(this)" />
<b style="text-indent: 1px;">
<%# Eval("Title") %></b>
</div>
</div>
<div id="ItemSection_WorkedHours_Header">
<%# Eval("WorkedHours")%> </div>
<div id="ItemSection_BillableHours_Header">
<asp:Label ID="lblBillableHours_Header" Text='<%# Eval("BillableHours")%>' runat="server"></asp:Label> </div>
<div id="ItemSection_Comments_Header">
</div>
<asp:Repeater ID="repResourcesList" runat="server">
<ItemTemplate>
<asp:HiddenField ID="hiddenReportId1" runat="server" Value='<%# Eval("ReportId") %>' />
<div id="ItemSection_Task_Item">
<div style="vertical-align: middle; padding-bottom: 5px; padding-left: 2px; padding-top: 1px;
height: 14px;">
<asp:CheckBox ID="CB" runat="server" onclick="checkItem(this)" />
<b style="text-indent: 1px;">
<%# Eval("EnteredbyName") %></b>
</div>
</div>
<div id="ItemSection_WorkedHours_Item">
<asp:Label ID="lblWorkedHours_Item" Text='<%# Eval("WorkedHours")%>' runat="server"></asp:Label> </div>
<div id="ItemSection_BillableHours_Item">
<asp:RegularExpressionValidator ValidationGroup="ApproveBillable" ID="RegularExpressionValidator1"
runat="server" ErrorMessage="*" ValidationExpression="^(-)?\d+(\.\d\d)?$" ControlToValidate="txtBillableHours"
Style="position: absolute;">*</asp:RegularExpressionValidator>
<asp:TextBox ID="txtBillableHours" Style="text-align: right" runat="server" Font-Size="12px"
Width="50px" Text='<%# Eval("BillableHours") %>'></asp:TextBox>
</div>
<div id="ItemSection_Comments_Item">
<asp:TextBox ID="txtComments" Font-Size="12px" Width="93px" runat="server" Text='<%# Eval("Comment") %>'></asp:TextBox>
</div>
</ItemTemplate>
</asp:Repeater>
</ItemTemplate>
<ItemStyle Height="24px" />
<SeparatorTemplate>
<div id="divSeparator">
</div>
</SeparatorTemplate>
<FooterTemplate>
<div id="Footer1">
TOTAL HOURS
</div>
<div id="Footer_WorkedHours">
<asp:Label ID="lblWorkedHours" runat="server" Text="0.00" Font-Size="12px" ForeColor="White"></asp:Label>
</div>
<div id="Footer_BillableHours">
<asp:Label ID="lblBillableHours_Footer" runat="server" Text="0.00" Font-Size="12px"
ForeColor="White"></asp:Label>
</div>
<div id="Footer_Comments">
</div>
</FooterTemplate>
</asp:DataList>
</ItemTemplate>
<SeparatorTemplate>
</SeparatorTemplate>
</asp:DataList>
What might be the problem?
<asp:DataList ID="SprintsWorkData" Style="float: left; padding-top: 1px;" runat="server"
OnItemDataBound="SprintsWorkData_ItemDataBound">
<ItemTemplate>
<asp:HiddenField ID="hiddenSprintId" runat="server" Value='<%# Eval("SprintId") %>' />
<div id="SprintNameSection">
<h4>
<%# Eval("SprintName") %></h4>
</div>
<div id="HeaderSection_SelectAll">
<div style="padding-top: 3px; height: 23px; padding-left: 2px;">
<asp:CheckBox ID="isAllCheck" runat="server" onclick="checkAll(this)" />
<b>
<asp:Label ID="sAll" Style="color: Black; text-indent: 1px;" Text="Select All" runat="server"></asp:Label>
</b>
</div>
</div>
<div class="HeaderSection_WorkedHours">
<b>
<asp:Literal ID="workedHours" runat="server" Text='<%$ Resources:LanguagePack, Worked_Hours %>'></asp:Literal></b></div>
<div class="HeaderSection_BillableHours">
<b>
<asp:Literal ID="billableHours" runat="server" Text='<%$ Resources:LanguagePack, Billable_Hours %>'></asp:Literal></b></div>
<div class="HeaderSection_Comments">
<b>
<asp:Literal ID="comments" runat="server" Text='<%$ Resources:LanguagePack, Comments %>'></asp:Literal></b></div>
<asp:DataList ID="HoursWorkData" runat="server" Style="float: left;">
<ItemTemplate>
<asp:HiddenField ID="hiddenTaskId" runat="server" Value='<%# Eval("BacklogId") %>' />
<div id="ItemSection_Task_Header">
<div style="vertical-align: middle; padding-bottom: 2px; padding-left: 2px; height: 18px;">
<asp:CheckBox ID="checkboxSub" runat="server" onclick="checkAllSub(this)" />
<b style="text-indent: 1px;">
<%# Eval("Title") %></b>
</div>
</div>
<div id="ItemSection_WorkedHours_Header">
<%# Eval("WorkedHours")%> </div>
<div id="ItemSection_BillableHours_Header">
<asp:Label ID="lblBillableHours_Header" Text='<%# Eval("BillableHours")%>' runat="server"></asp:Label> </div>
<div id="ItemSection_Comments_Header">
</div>
<asp:Repeater ID="repResourcesList" runat="server">
<ItemTemplate>
<asp:HiddenField ID="hiddenReportId1" runat="server" Value='<%# Eval("ReportId") %>' />
<div id="ItemSection_Task_Item">
<div style="vertical-align: middle; padding-bottom: 5px; padding-left: 2px; padding-top: 1px;
height: 14px;">
<asp:CheckBox ID="CB" runat="server" onclick="checkItem(this)" />
<b style="text-indent: 1px;">
<%# Eval("EnteredbyName") %></b>
</div>
</div>
<div id="ItemSection_WorkedHours_Item">
<asp:Label ID="lblWorkedHours_Item" Text='<%# Eval("WorkedHours")%>' runat="server"></asp:Label> </div>
<div id="ItemSection_BillableHours_Item">
<asp:RegularExpressionValidator ValidationGroup="ApproveBillable" ID="RegularExpressionValidator1"
runat="server" ErrorMessage="*" ValidationExpression="^(-)?\d+(\.\d\d)?$" ControlToValidate="txtBillableHours"
Style="position: absolute;">*</asp:RegularExpressionValidator>
<asp:TextBox ID="txtBillableHours" Style="text-align: right" runat="server" Font-Size="12px"
Width="50px" Text='<%# Eval("BillableHours") %>'></asp:TextBox>
</div>
<div id="ItemSection_Comments_Item">
<asp:TextBox ID="txtComments" Font-Size="12px" Width="93px" runat="server" Text='<%# Eval("Comment") %>'></asp:TextBox>
</div>
</ItemTemplate>
</asp:Repeater>
</ItemTemplate>
<ItemStyle Height="24px" />
<SeparatorTemplate>
<div id="divSeparator">
</div>
</SeparatorTemplate>
<FooterTemplate>
<div id="Footer1">
<asp:Literal ID="totalHours" runat="server" Text='<%$ Resources:LanguagePack,TOTAL_HOURS %>'></asp:Literal>
</div>
<div id="Footer_WorkedHours">
<asp:Label ID="lblWorkedHours" runat="server" Text="0.00" Font-Size="12px" ForeColor="White"></asp:Label>
</div>
<div id="Footer_BillableHours">
<asp:Label ID="lblBillableHours_Footer" runat="server" Text="0.00" Font-Size="12px"
ForeColor="White"></asp:Label>
</div>
<div id="Footer_Comments">
</div>
</FooterTemplate>
</asp:DataList>
</ItemTemplate>
<SeparatorTemplate>
</SeparatorTemplate>
</asp:DataList>
I've just forgot to add float:left to the inner datalist or dlchild. the parent datalist has float:left