margin-left is not working in asp.net label

margin-left is not working in asp.net label - asp.net

Please find my code below.
<div style="position:relative">
<asp:Label ID="lbl_details" runat="server" style="margin-top:50px;display:inline-block" Text="Details"
Width="150px"></asp:Label>
<textarea id="txtarea_details" runat="server" cssclass="textbox" maxlength="150" columns="30" rows="5"
style="border:1px solid #CCC; margin-top:0px; margin-left:0px; width:191px; white-space:pre-wrap"></textarea>
<asp:Label ID="Label12" runat="server"
Text=" &nbsp Remarks"
Width="345px"></asp:Label>
<asp:TextBox ID="txt_remarks" runat="server" style="margin-top:0px;" CssClass="textbox"></asp:TextBox>
</div>

<div style="position:relative">
<div style="width:30%;float:left,text-allign:right,padding:50px,0px,0px,15px">
<asp:Label ID="lbl_details" runat="server" Text="Details" ></asp:Label>
</div>
<div style="width:70%;float:left,text-allign:left,padding:50px,0px,0px,15px">
<textarea id="txtarea_details" runat="server" cssclass="textbox" maxlength="150" columns="30" rows="5"
style="border:1px solid #CCC; margin-top:0px; margin-left:0px; width:191px; white-space:pre-wrap"></textarea>
<div style="width:30%;float:left,text-allign:right,padding:50px,0px,0px,15px">
<asp:Label ID="Label12" runat="server"Text="Remarks"
Width="345px"></asp:Label>
</div>
<div style="width:70%;float:left,text-allign:right,padding:50px,0px,0px,15px">
<asp:TextBox ID="txt_remarks" runat="server" style="margin-top:0px;" CssClass="textbox"></asp:TextBox>
</div>
</div>

Related

ASP.net DropDownList, SelectedIndexChanged Not Working

I tried every way but it didn't work at all. I would be glad if you can help. Trigger, AutoPostBack etc. I added everything, but still could not reach the solution in any way. Thank you.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="prequest.aspx.cs" Inherits="musteri_prequest" validateRequest="false" enableEventValidation="false" viewStateEncryptionMode="Never" %>
<form id="form-login" class="text-start">
<form runat="server">
<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<contenttemplate>
<div class="mb-3">
<label class="form-label" id="lbl-nombre" for="txt-nombre" style="font-family: Montserrat, sans-serif;font-size: 15px;font-weight: bold;">Cihaz Seçiniz:</label>
<asp:DropDownList ID="prequ_cihaz" runat="server" AutoPostBack="True" EnableViewState="true" CssClass="form-control" style="border-color: var(--first-color);margin-bottom: 15px;" OnSelectedIndexChange = "Prequ_cihaz_SelectedIndexChanged"></asp:DropDownList>
<label class="form-label" id="lbl-nombre-1" for="txt-nombre" style="font-family: Montserrat, sans-serif;font-size: 15px;font-weight: bold;">Problem Türü:</label>
<asp:DropDownList ID="prequ_prob" runat="server" CssClass="form-control" style="border-color: var(--first-color);margin-bottom: 15px;"></asp:DropDownList>
</div>
<div class="mb-3"></div>
<div class="mb-3"></div>
<div class="mb-3">
<asp:Label ID="prequest_label" runat="server" Text="" style="color:rgb(148,0,211); font-family: Alatsi, sans-serif; margin-bottom: 9px;" ></asp:Label>
<label class="form-label" id="lbl-nombre-1" for="txt-nombre" style="font-family: Montserrat, sans-serif;font-size: 15px;font-weight: bold;">Probleminizi açıklayınız.</label>
<asp:TextBox ID="prequest_exp" runat="server" TextMode="MultiLine" Rows="5" CssClass="form-control form-control-lg" style="border-color: var(--first-color);margin-bottom: 15px;"></asp:TextBox>
</div>
<div class="text-center">
<asp:Button ID="prequest_button" runat="server" onClick="prequest_button_Click" Text="Gönder" CssClass="btn btn-primary text-center" style=" background: var(--bs-indigo);" />
</div>
</contenttemplate>
</asp:UpdatePanel>
</form>
protected void Prequ_cihaz_SelectedIndexChanged(object sender, EventArgs e)
{
a = prequ_cihaz.SelectedIndex;
prequest_exp.Text = "Run!";
}

I found out that the error was due to two nested <form> tags.
Solution:
<form runat="server" class="text-start" style="max-width: 70%; margin: 0 auto; margin-top: 20px;">
<div class="mb-3"><label class="form-label" id="lbl-nombre" for="txt-nombre" style="font-family: Montserrat, sans-serif;font-size: 15px;font-weight: bold;">Cihaz Seçiniz:</label><asp:DropDownList ID="prequ_cihaz" runat="server" AutoPostBack="True" EnableViewState="true" CssClass="form-control" style="border-color: var(--first-color);margin-bottom: 15px;" OnSelectedIndexChanged = "Prequ_cihaz_SelectedIndexChanged">
<asp:ListItem>Cihaz Seçiniz</asp:ListItem></asp:DropDownList>
<label class="form-label" id="lbl-nombre-1" for="txt-nombre" style="font-family: Montserrat, sans-serif;font-size: 15px;font-weight: bold;">Problem Türü:</label><asp:DropDownList ID="prequ_prob" runat="server" CssClass="form-control" style="border-color: var(--first-color);margin-bottom: 15px;"></asp:DropDownList></div>
<div class="mb-3"></div>
<div class="mb-3"></div>
<div class="mb-3"><asp:Label ID="prequest_label" runat="server" Text="" style="color:rgb(148,0,211); font-family: Alatsi, sans-serif; margin-bottom: 9px;" ></asp:Label><label class="form-label" id="lbl-nombre-1" for="txt-nombre" style="font-family: Montserrat, sans-serif;font-size: 15px;font-weight: bold;">Probleminizi açıklayınız.</label><asp:TextBox ID="prequest_exp" runat="server" TextMode="MultiLine" Rows="5" CssClass="form-control form-control-lg" style="border-color: var(--first-color);margin-bottom: 15px;"></asp:TextBox></div>
<div class="text-center"><asp:Button ID="prequest_button" runat="server" onClick="prequest_button_Click" Text="Gönder" CssClass="btn btn-primary text-center" style=" background: var(--bs-indigo);" /></div>
</form>

how to give hover effect to DataList

<ItemTemplate>
<div class="span3">
<div class="row">
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("product_img") %>' BorderStyle="Outset" ImageAlign="Top" Width="250px" />
</div>
<div class="row" >
<b>product_name:</b>
<asp:Label ID="product_nameLabel" runat="server" Text='<%# Eval("product_name") %>' />
</div>
<div class="row">
<b>product_description:</b>
<asp:Label ID="product_descriptionLabel" runat="server" Text='<%# Eval("product_description") %>' />
</div>
<div class="row">
<b>product_price:</b>
<asp:Label ID="product_priceLabel" runat="server" Text='<%# Eval("product_price")%>' />
</div>
<br /><br /><br /><br />
</div>
</ItemTemplate>
<SelectedItemStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
</asp:DataList>
how i can give hover effect to the items
i have used jquery but it is taking effect to the first item only
is there any way to give hover mouseover effects to individual items

You can use the :hover selector in CSS to the row class like so:
.row:hover {
/* styling */
}

With Jquery:
$(document).ready(function(){
$('.row').hover(function(){
$(this).css('background-color','yellow');
},function(){
$(this).css('background-color','transparent');
})
})
$(document).ready(function(){
$('.row').hover(function(){
$(this).css('background-color','yellow');
},function(){
$(this).css('background-color','transparent');
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ItemTemplate>
<div class="span3">
<div class="row">
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("product_img") %>' BorderStyle="Outset" ImageAlign="Top" Width="250px" />
</div>
<div class="row" >
<b>product_name:</b>
<asp:Label ID="product_nameLabel" runat="server" Text='<%# Eval("product_name") %>' />
</div>
<div class="row">
<b>product_description:</b>
<asp:Label ID="product_descriptionLabel" runat="server" Text='<%# Eval("product_description") %>' />
</div>
<div class="row">
<b>product_price:</b>
<asp:Label ID="product_priceLabel" runat="server" Text='<%# Eval("product_price")%>' />
</div>
<br /><br /><br /><br />
</div>
</ItemTemplate>
<SelectedItemStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
</asp:DataList>
With Css:
.row:hover {
background-color:yellow;
}
.row:hover {
background-color:yellow;
}
<ItemTemplate>
<div class="span3">
<div class="row">
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("product_img") %>' BorderStyle="Outset" ImageAlign="Top" Width="250px" />
</div>
<div class="row" >
<b>product_name:</b>
<asp:Label ID="product_nameLabel" runat="server" Text='<%# Eval("product_name") %>' />
</div>
<div class="row">
<b>product_description:</b>
<asp:Label ID="product_descriptionLabel" runat="server" Text='<%# Eval("product_description") %>' />
</div>
<div class="row">
<b>product_price:</b>
<asp:Label ID="product_priceLabel" runat="server" Text='<%# Eval("product_price")%>' />
</div>
<br /><br /><br /><br />
</div>
</ItemTemplate>
<SelectedItemStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
</asp:DataList>

asp.net validation controls - CSS placement

I am creating an address control which would use some address validation APIs( google/bing etc) to validate the user entered address. I would also like to validate the fields in the client side (like required fields, Zip format etc) with asp.net validation controls. I am trying to build this with CSS and am using float to align the text boxes (or is there a better way ?) The validation controls have dynamic display and want to place them next to the text boxes when they are not validated. Right now it wraps around/messes up with the placement of other controls. May be there is a better way of doing it ? Here is my code
<style type="text/css">
.Wrapper{
width:auto;
height:auto;
}
.address{
width:500px;
height:auto;
}
.validator{
}
.textbox {
float:right;
}
label{
float:left;
}
.button-right{
float:right;
margin-right:290px;
}
div{
margin:5px;
}
.field
{
width:200px;
}
</style>
<div id="addressUI" class="address">
<div class="field" >
<label ID="lblStreet" for="txtStreet">Street: </label><label style="color:Red">*</label>
<asp:TextBox ID="txtStreet" runat="server" CssClass="textbox" Text="" ></asp:TextBox>
<asp:RequiredFieldValidator ID="rqdStreet" runat="server" ErrorMessage="Street is required" ControlToValidate="txtStreet" Display="Dynamic">
</asp:RequiredFieldValidator>
</div>
<div class="field">
<label ID="lblCity" for="txtCity">City: </label><label style="color:Red">*</label>
<asp:TextBox ID="txtCity" runat="server" Text="" CssClass="textbox" > </asp:TextBox>
<asp:RequiredFieldValidator ID="rqdCity" runat="server" ErrorMessage="City is required" ControlToValidate="txtCity" Display="Dynamic">
</asp:RequiredFieldValidator>
</div>
<div class="field">
<label ID="lblState" for="ddlState" >State: </label><label style="color:Red">*</label>
<asp:DropDownList ID="ddlState" runat="server" style="width:80px;margin-left:12px;" CssClass="">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="rqdState" runat="server" ControlToValidate="ddlState" ErrorMessage="State is required" Display="Dynamic">
</asp:RequiredFieldValidator>
</div>
<div class="field">
<label ID="lblZip" for="txtZip">Zip: </label><label style="color:Red">*</label>
<asp:TextBox ID="txtZip" runat="server" CssClass="" Text="" style="width:50px;margin-left:22px;" ></asp:TextBox>
<asp:RequiredFieldValidator ID="rqdZIP" ControlToValidate="txtZip" runat="server" ErrorMessage="ZIP is required" Display="Dynamic">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="regexValidator" runat="server"
ErrorMessage="Zip is invalid" Display="Dynamic" ControlToValidate="txtZip"
ValidationExpression="\d{5}(-\d{4})?"></asp:RegularExpressionValidator>
</div>
<div class="button-right">
<asp:Button ID="btnValidate" runat="server" Text="validate" OnClick="btnValidate_Click" CausesValidation="true" />
</div>
</div>

<head>
<style type="text/css">
label
{
display:inline;
float:left;
width:75px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="addressUI" class="address">
<div class="field">
<label id="lblStreet" for="txtStreet">
Street: <span style="color: Red">*</span>
</label>
<asp:TextBox ID="txtStreet" runat="server" CssClass="textbox" Text=""></asp:TextBox>
<asp:RequiredFieldValidator ID="rqdStreet" runat="server" ControlToValidate="txtStreet"
Display="Dynamic" ErrorMessage="Street is required">
</asp:RequiredFieldValidator>
</div>
<div class="field">
<label id="lblCity" for="txtCity">
City:<span style="color: Red">*</span>
</label>
<asp:TextBox ID="txtCity" runat="server" CssClass="textbox" Text=""> </asp:TextBox>
<asp:RequiredFieldValidator ID="rqdCity" runat="server" ControlToValidate="txtCity"
Display="Dynamic" ErrorMessage="City is required">
</asp:RequiredFieldValidator>
</div>
<div class="field">
<label id="lblState" for="ddlState">
State:<span style="color: Red">*</span>
</label>
<asp:DropDownList ID="ddlState" runat="server" CssClass="" Style="width: 80px">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="rqdState" runat="server" ControlToValidate="ddlState"
Display="Dynamic" ErrorMessage="State is required">
</asp:RequiredFieldValidator>
</div>
<div class="field">
<label id="lblZip" for="txtZip">
Zip:<span style="color: Red">*</span>
</label>
<asp:TextBox ID="txtZip" runat="server" CssClass="" Style="width: 50px"
Text=""></asp:TextBox>
<asp:RequiredFieldValidator ID="rqdZIP" runat="server" ControlToValidate="txtZip"
Display="Dynamic" ErrorMessage="ZIP is required">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="regexValidator" runat="server" ControlToValidate="txtZip"
Display="static" ErrorMessage="Zip is invalid" ValidationExpression="\d{5}(-\d{4})?"></asp:RegularExpressionValidator>
</div>
<div class="button-right">
<asp:Button ID="btnValidate" runat="server" CausesValidation="true"
Text="validate" />
</div>
</div>
</div>
</form>
</body>
</html>

I can't get the panels within my panel to center

They all appear left aligned. I've tried setting the body tag to text-align:center, making divs around and in the main panel, but I can't get it to work. Any ideas?
Here is my CSS code:
.MainPanel {
background-color:#ccccff;
margin-bottom:10px;
margin-top:10px;
}
.MainPanel div {
margin-bottom:10px;
margin-top:10px;
}
.panelSpace {
margin-bottom:25px;
margin-top:25px;
}
.buttonWidth { clear: both; }
.buttonWidth div {
width:17%;
float:left;
margin-left:20px;
}
.centerDiv {
width:100%;
text-align:center;
}
And here's my html:
<body>
<form id="form1" runat="server">
<div style="height:100px; text-align:center;"><uc1:Header ID="Header1" runat="server" /></div><br /><br />
<div>
<div><asp:Label runat="server" ID="lblErrorMessage" CssClass="lblErrorMessage" /></div>
<asp:Panel ID="Panel0" runat="server" BackColor="#9999CC" BorderColor="DarkBlue" BorderWidth="2px">
<div class="centerDiv">
<div>
<asp:Panel ID="Panel1" runat="server" CssClass="MainPanel" Width="550" BorderColor="DarkBlue" BorderWidth="2px" >
<div>Customer: <asp:DropDownList ID="ddlCustomerList" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlCustomerList_SelectedIndexChanged" /></div>
</asp:Panel>
</div>
<span class="panelSpace" />
<asp:Panel ID="Panel2" runat="server" CssClass="MainPanel" Width="700" BorderColor="DarkBlue" BorderWidth="2px" style="overflow:auto;" >
<div>
<div class="buttonWidth">
<div>
<asp:Label ID="lblDataSync" runat="server" Text="Data Sync" /><br />
<asp:ImageButton ID="imgDataSync" ImageUrl=".\images\data_sync.bmp" runat="server"
Width="50px" Height="50px" OnClick="imgDataSync_Click" />
</div>
<div>
<asp:Label ID="lblEDI" runat="server" Text="EDI" /><br />
<asp:ImageButton ID="imgEDI" ImageUrl=".\images\edi.jpg" runat="server" Width="50px"
Height="50px" OnClick="imgEDI_Click" />
</div>
<div>
<asp:Label ID="lblShipping" runat="server" Text="Shipping/Routing" /><br />
<asp:ImageButton ID="imgShipping" ImageUrl=".\images\shipping_routing.jpg" runat="server"
Width="50px" Height="50px" OnClick="imgShipping_Click" />
</div>
<div>
<asp:Label ID="lblCompliance" runat="server" Text="Compliance/non-Compliant" /><br />
<asp:ImageButton ID="imgCompliance" ImageUrl=".\images\compliance_nc.jpg" runat="server"
Width="50px" Height="50px" OnClick="imgCompliance_Click" />
</div>
<div>
<asp:Label ID="lblLabels" runat="server" Text="Labels"></asp:Label><br />
<asp:ImageButton ID="imgLabels" ImageUrl=".\images\shipping_label.jpg" runat="server"
Width="50px" Height="50px" OnClick="imgLabels_Click" />
</div>
</div>
<div class="buttonWidth">
<div>
<asp:Label ID="lblManuals" runat="server" Text="Manuals/CustomerLinks" /><br />
<asp:ImageButton ID="imgManuals" ImageUrl=".\images\manuals.bmp" runat="server" Width="50px"
Height="50px" OnClick="imgManuals_Click" />
</div>
<div>
<asp:Label ID="lblPackaging" runat="server" Text="Packaging" /><br />
<asp:ImageButton ID="imgPackaging" ImageUrl=".\images\packaging.gif" runat="server"
Width="50px" Height="50px" OnClick="imgPackaging_Click" />
</div>
<div>
<asp:Label ID="lblTesting" runat="server" Text="Testing"></asp:Label><br />
<asp:ImageButton ID="imgTesting" ImageUrl=".\images\testing.jpg" runat="server" Width="50px"
Height="50px" OnClick="imgTesting_Click" />
</div>
<div>
<asp:Label ID="lblShippingQuickReference" runat="server" Text="Shipping Quick Reference"></asp:Label><br />
<asp:ImageButton ID="imgShippingQuickReference" ImageUrl=".\images\ShippingQuickReference.jpg" runat="server" Width="50px"
Height="50px" OnClick="imgShippingQuickReference_Click" />
</div>
</div>
</div>
</asp:Panel>
<span class="panelSpace" />
<asp:Panel ID="Panel3" runat="server" CssClass="MainPanel" Width="800" BorderColor="DarkBlue" BorderWidth="2px" >
<div>
<h2>Recent Updates:</h2>
<asp:GridView ID="grdHistory" runat="server">...</asp:GridView>
<asp:LinqDataSource ID="ldsHistory" runat="server" ContextTypeName="ComplianceDataContext"
TableName="Histories" OrderBy="CreatedDate desc" />
</div>
</asp:Panel>
<span class="panelSpace" />
</div>
</asp:Panel>
</div>
</form>
</body>

Set the width of the panels not in the ASP.NET code, but in the CSS declaration, e.g.
.MainPanel {
background-color:#ccccff;
margin-bottom:10px;
margin-top:10px;
width: 700px;
}
If you do not want to set the style for all panels, but for each panel, then do something like:
<asp:Panel ID="Panel1" runat="server" CssClass="MainPanel" style="width:550px" BorderColor="DarkBlue" BorderWidth="2px" >

I'm having trouble positioning this button nicely

I've been goin at it now for an 1.5hrs and I just can't figure out a way to make it the way I want. I'm kind of new with all things web, and it takes about as much time (maybe more?) trying to get things where I want and doing it in a way that is elegant.
Anyways, I have two text boxes, with two labels above them and centered over the box. I want to simply put a button in between them and about centered with the textboxes' height.
This is as close as I can make it get to what I want. I would like the left textbox moved over so it lines up with the words "Jump To:, "Customer:," and "Customer #:" and then have the right box be the same distance on the right with the Next button maybe a just 10px higher but still centered as it is. The problem with this picture is that it only works when the text boxes are shown and expanded, if they are hidden, then the panel actually renders half-way above the Customer # part because of how I manipulated the margins I'm guessing.
http://img192.imageshack.us/img192/259/controls.jpg http://img192.imageshack.us/img192/259/controls.jpg
Here's my attempt with <div>s
<div style="position:relative; overflow:auto; margin-top:15px; margin-bottom:10px;">
<div style="width:40%; float:left; margin-left:10px;">
<div><asp:Label runat="server" ID="lblInfoDesc" /></div>
<div><asp:TextBox ID="txtInfoDescription" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" Width="100%" /></div>
</div>
<%--<div style="position:absolute; margin-top:25px; margin-left:-10px;"><asp:Button ID="Button1" runat="server" Text="Next" /></div>--%>
<div style="width:40%; float:right; margin-right:16px;">
<div><asp:Label runat="server" ID="lblInfoData" /></div>
<div><asp:TextBox ID="txtInfoData" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" Width="100%" /></div>
</div>
</div>
And here's my attempt with table elements
<div style="margin-bottom:10px;">
<table style="position:relative; width:100%; margin-bottom:15px;">
<tr style="text-align:center";>
<td><asp:Label runat="server" ID="lblInfoDesc" /></td>
<td></td><td></td><td></td><td></td>
<td><asp:Label runat="server" ID="lblInfoData" /></td>
</tr>
<tr>
<td style="margin-left: 0px;"><asp:TextBox ID="txtInfoDescription" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" Width="80%" /></td>
<td></td><td></td><td></td><td></td>
<td style="margin-right:10px;"><asp:TextBox ID="txtInfoData" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" Width="80%" /></td>
</tr>
</table>
<div style="position:inherit; text-align:center; margin-top:-55px; margin-bottom:25px;">
<asp:Button ID="Button2" runat="server" Text="Next" />
</div>
</div>
All of those <td></td><td></td><td> was to attempt to put spaces between the button and the text boxes because I couldn't get float nor margin to work. Any help would be much appreciated!
And here's the complete page source:
<asp:Panel ID="pnlCustomer" runat="server" style="background-color:#ccccff; width:500px; height:90%; position:relative;" BorderColor="DarkBlue" BorderWidth="2px">
<div style="position:relative; margin-top:10px; margin-left:10px;">
<div style="color:#003399; font-size:18px; text-align:left;">Jump To:
<asp:DropDownList ID="ddlCategory" runat="server" AutoPostBack="True"
onselectedindexchanged="ddlCategory_SelectedIndexChanged"
style="margin-left:40px;"/>
</div>
</div>
<div style="position:relative; margin-top:10px; margin-left:10px;">
<div style="color:#003399; font-size:18px; text-align:left;">Customer:
<asp:DropDownList ID="ddlCustomersList" runat="server" AutoPostBack="true"
OnSelectedIndexChanged="ddlCustomersList_SelectedIndexChanged"
style="margin-left:35px;"/>
<asp:Button ID="btnAddCustomer" runat="server" Text="Add" OnClick="btnAddCustomer_Click" OnClientClick="return confirm('Warning: This will redirect you from the page');" />
</div>
</div>
<div style="position:relative; margin-top:10px; margin-left:10px;">
<div style="color:#003399; font-size:18px; text-align:left;">Customer #:
<asp:DropDownList ID="ddlCustomerNumber" runat="server" AutoPostBack="true"
OnSelectedIndexChanged="ddlCustomerNumber_SelectedIndexChanged"
style="margin-left:20px;"/>
<asp:TextBox ID="txtCustomerNumber" runat="server" style="margin-left:20px;" />
<asp:Button ID="btnModify" runat="server" Text="Modify" OnClick="btnModify_Click" />
<asp:Button ID="btnCreateNew" runat="server" Text="Create New" OnClick="btnCreateNew_Click" />
<asp:Button ID="btnUpdate" runat="server" Text="Update" OnClick="btnUpdate_Click" />
<asp:Button ID="btnDelete" runat="server" Text="Delete" OnClick="btnDelete_Click" OnClientClick="return confirm('Do you want to delete the record ?');" />
<asp:Button ID="btnSaveNew" runat="server" Text="Save" OnClick="btnSaveNew_Click" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click" />
</div>
</div>
<%-- <div style="margin-bottom:10px;">
<table style="position:relative; width:100%; margin-bottom:15px;">
<tr style="text-align:center";>
<td><asp:Label runat="server" ID="lblInfoDesc" /></td>
<td></td><td></td><td></td><td></td>
<td><asp:Label runat="server" ID="lblInfoData" /></td>
</tr>
<tr>
<td style="margin-left: 0px;"><asp:TextBox ID="txtInfoDescription" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" Width="80%" /></td>
<td></td><td></td><td></td><td></td>
<td style="margin-right:10px;"><asp:TextBox ID="txtInfoData" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" Width="80%" /></td>
</tr>
</table>
<div style="position:inherit; text-align:center; margin-top:-55px; margin-bottom:25px;">
<asp:Button ID="Button2" runat="server" Text="Next" />
</div>
</div>--%>
<div style="position:relative; overflow:auto; margin-top:15px; margin-bottom:10px;">
<div style="text-align:center; margin-bottom:-20px; ">
<asp:Button ID="btnNextInfo" runat="server" Text="Next" />
</div>
<div style="width:40%; float:left; margin-left:10px;">
<div><asp:Label runat="server" ID="lblInfoDesc" /></div>
<div><asp:TextBox ID="txtInfoDescription" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" Width="100%" /></div>
</div>
<div style="width:40%; float:right; margin-right:16px;">
<div><asp:Label runat="server" ID="lblInfoData" /></div>
<div><asp:TextBox ID="txtInfoData" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" Width="100%" /></div>
</div>
</div>
<div style="margin-top:-20px; position:absolute; font-size:12px;"><asp:Label runat="server" ID="lblErrorMessage" /></div>
</asp:Panel>

It seems like this is more of a CSS and HTML question than an ASP.Net question.
To be clear, centering things vertically in their parent with CSS isn't easy, the trick is:
The parent element must have a position:relative or absolute.
The child must be wrapped in a div or something positionable.
The child must have the top:50%
The child must declare a height.
the child must have a margin-top = it's height / 2 * -1. (basically you move it up by half it's height.)
Try this:
<style>
div.textboxArea {
text-align:center;
float:left;
width:40%;
height:400px;
}
.textboxArea textarea {
width:80%;
height:400px;
}
.centerMeVertically div {
position:absolute;
top:50%;
vertical-align:middle;
height:30px;
width:100%;
margin-top:-15px;
text-align:center;
}
div.centerMeVertically {
float:left;
width:20%;
text-align:center;
height:400px;
position:relative;
}
p {
height:35px;
margin:-35px 0 0 0;
}
.container {
margin-top:35px;
}
</style>
<div class="container">
<div style="width:100%;">
<div class="textboxArea">
<p>Label 1</p>
<textarea></textarea>
</div>
<div class="centerMeVertically">
<div><button>Button2</button></div>
</div>
<div class="textboxArea">
<p>Label 2</p>
<textarea></textarea>
</div>
</div>
</div>
EDIT: Having seen your revised question, I've revised my answer to center the button only to the textarea vertically.
You have to do some stupid CSS tricks with the top-margin, but it gets the job done. Also notice the container div. This is to make sure that if you place anything "above" this snippet in your markup, it doesn't get overlapped by the labels.

if I haven't misunderstood, it's not that tough. see if following code renders the layout your image says.
<table cellpadding="3px" cellspacing="0" border="0" style="width: 100%;">
<tr>
<td align="center" valign="top">
Label
</td>
<td align="center" valign="top">
</td>
<td align="center" valign="top">
Label
</td>
</tr>
<tr>
<td align="center" valign="top">
<asp:TextBox ID="TextBox1" TextMode="MultiLine" Rows="7" runat="server"></asp:TextBox>
</td>
<td align="center" valign="top">
<asp:Button ID="Button1" runat="server" Text="Button" />
</td>
<td align="center" valign="top">
<asp:TextBox ID="TextBox2" TextMode="MultiLine" Rows="7" runat="server"></asp:TextBox>
</td>
</tr>
</table>

I would stick with something simple like this table... then add padding as needed.
<table>
<tr>
<td align="center">label a</td>
<td></td>
<td align="center">label b</td>
</tr>
<tr>
<td valign="top"><textarea id="txtinfodescription" rows="3" maxlength="500" width="80%"></textarea></td>
<td valign="middle"><input type="button" id="button2" value="next"/></td>
<td valign="top"><textarea id="txtinfodata" rows="3" maxlength="500" width="80%"></textarea></td>
</tr>
</table>
don't get me wrong, you can go the pure CSS route too... but if you layout get much more complex and you need to maintain a fairly rigid "grid-like" structure... tables help.

Develop Reference

r css asp.net wordpress firebase qt symfony nginx http apache-flex

margin-left is not working in asp.net label - asp.net

Related

ASP.net DropDownList, SelectedIndexChanged Not Working

how to give hover effect to DataList

asp.net validation controls - CSS placement

I can't get the panels within my panel to center

I'm having trouble positioning this button nicely

Categories

Resources