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.
Related
I'm trying to fit a GridView (or a ListView, I've tried both) into the panel-body of a div panel. However, whenever the GridView appears, it closes out the panel-body early and causes formatting issues.
I've tried GridView, ListView, rearranging the elements of my panel, and I've trimmed a lot of stuff back to get it down to just the GridView.
<asp:ListView ID="lvOuter" runat="server" ItemPlaceholderID="placeHolder" DataKeyNames="PkUser" OnItemCommand="lvOuter_ItemCommand" OnSorting="lvOuter_Sorting" OnSelectedIndexChanging="lvOuter_SelectedIndexChanging" OnPagePropertiesChanging="lvOuter_PagePropertiesChanging">
<LayoutTemplate>
<table style="border-collapse: collapse; width: 100%">
<tbody>
<tr id="placeHolder" runat="server" style="width: 100%"></tr>
</tbody>
<tfoot>
<tr style="align-content: center;">
<td class="listViewFooterText" style="color: white; text-align: center">
<uc:listviewpager runat="server" id="ucOuterListViewPager" listviewcontrolid="lvOuter" />
</td>
</tr>
</tfoot>
</table>
</LayoutTemplate>
<ItemTemplate>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<span class="glyphicon glyphicon-user x1" style="text-align: left;" />
<b>
<asp:Label ID="lbEmployeeTitle" runat="server" Style="font-family: Arial; font-size: 14px;" Text='<%# Eval("EmployeeName") %>'></asp:Label></b>
<asp:Label ID="lbUnapprovedTitle" runat="server" CssClass="badge badge-blue" Text='<%# Eval("TotUnapproved") %>'></asp:Label>
</h3>
</div>
<div class="panel-body">
<asp:GridView ID="gvInner" runat="server" DataSource='<%# Eval("IndividualTracking") %>' AutoGenerateColumns="false" DataKeyNames="PkTrainingRequest" OnRowCommand="gvInner_RowCommand">
<Columns>
<asp:TemplateField ItemStyle-Width="40%" HeaderText="Title">
<ItemTemplate>
<asp:LinkButton ID="kbTitle" runat="server" CssClass="gridViewRowText" CommandName="Populate" ToolTip="Go to Training Request" Text='<%# Eval("Title") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-Width="20%" HeaderText="Length">
<ItemTemplate>
<asp:LinkButton ID="kbLength" runat="server" CssClass="gridViewRowText" CommandName="Populate" ToolTip="Go to Training Request" Text='<%#Eval("Length") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-Width="30%" HeaderText="Date">
<ItemTemplate>
<asp:LinkButton ID="kbDate" runat="server" CssClass="gridViewRowText" CommandName="Populate" ToolTip="Go to Training Request" Text='<%#Eval("Date") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-Width="10%" HeaderText="Approve">
<ItemTemplate>
<asp:Button ID="btnQuickApprove" runat="server" Text="Quick Approve" CssClass="btn btn-success" CommandName="Approve" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-2">
<asp:Button ID="btnDrillDown" Text='<%#Eval("Subordinates") %>' CommandName="DrillDown" CssClass="btn btn-primary" runat="server" Visible='<%#Eval("VisibleSubordinates") %>' />
</div>
<div class="col-md-2">
</div>
<div class="col-md-2">
<asp:Button ID="btnViewTraining" Text="View All Training" CommandName="ViewTraining" CssClass="btn btn-primary" runat="server" />
</div>
<div class="col-md-4"></div>
</div>
</div>
</div>
</ItemTemplate>
</asp:ListView>
Expected result: panels, each with a header and footer, and a gridview (when it populates) in the body.
Actual result: the panels work fine until the gridview populates. When that happens, the panel-body ends before the gridview, and the panel-footer attaches to the top of the next panel.
You made a tr the placeHolder. So it generates this, which is incorrect html
<table style="border-collapse: collapse; width: 100%">
<tbody>
<div class="panel panel-default">
xxx
</div>
So if you want to use a correct table, make the LayoutTemplate like this
<asp:ListView ID="lvOuter" runat="server" ItemPlaceholderID="placeHolder">
<LayoutTemplate>
<table style="border-collapse: collapse; width: 100%">
<tbody>
<tr>
<td>
<span id="placeHolder" runat="server"></span>
</td>
</tr>
</tbody>
</table>
</LayoutTemplate>
<ItemTemplate>
<div class="panel panel-default">
</div>
</ItemTemplate>
</asp:ListView>
Which generates
<table>
<tbody>
<tr>
<td>
<div class="panel panel-default">
</div>
<div class="panel panel-default">
</div>
</td>
</tr>
</tbody>
</table>
This still places everything in a single table cell. If you want a cell per ItemTemplate you need to put <tr><td> in it.
I have a UpdatePanel and UpdateProgress inside a User Control.
The position of usercontrol can be controlled from the backend. So need a css which makes the ajax-loader.gif is positioned center to the Div id="main" of my usercontrol. How can i position it ?
Right now, i use the below code...
HTML Rendered :
<div id="ctl00_ContentPlaceHolder1_ltlsectionRight2">
<style type="text/css">
#UpdateProgress1 {
background-color:#CF4342;
color:#fff;
top:0px;
right:0px;
position:absolute;
display:inline;
}
#UpdateProgress1 img {
vertical-align:middle;
margin:2px;
}
</style>
<div style="visibility:hidden;display:block;" id="ctl00_ContentPlaceHolder1_GovermentSchemes_UpdateProgress1" role="status" aria-hidden="true">
<img src="Images/ajax-loader.gif">
</div>
<div class="title">
<div class="title-text">
<div class="title-text-brown">
Assistance
</div>
<div class="title-text-white">
Schemes</div>
</div>
</div>
<div id="Main" class="green-box">
<div class="box-content">
<table>
<tbody><tr>
<td>
</td>
</tr>
<tr>
<td class="style3">
<div id="ctl00_ContentPlaceHolder1_GovermentSchemes_UP1">
<select style="width:208px;" id="ctl00_ContentPlaceHolder1_GovermentSchemes_ddlTypes" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$GovermentSchemes$ddlTypes\',\'\')', 0)" name="ctl00$ContentPlaceHolder1$GovermentSchemes$ddlTypes">
<option value="0" selected="selected">Select Type</option>
<option value="17">type 1</option>
<option value="19">type 2</option>
</select>
</div>
</td>
</tr>
<tr>
<td class="style3">
<div id="ctl00_ContentPlaceHolder1_GovermentSchemes_UP2">
<select style="width:208px;" id="ctl00_ContentPlaceHolder1_GovermentSchemes_ddlSchemes" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$GovermentSchemes$ddlSchemes\',\'\')', 0)" name="ctl00$ContentPlaceHolder1$GovermentSchemes$ddlSchemes">
<option value="-1">Type is not selected</option>
<option value="0" selected="selected">Select Scheme</option>
</select>
</div>
</td>
</tr>
<tr>
<td align="right">
<div id="ctl00_ContentPlaceHolder1_GovermentSchemes_UP3">
<a title="Select Type & Schemes to view." disabled="disabled" id="ctl00_ContentPlaceHolder1_GovermentSchemes_HypView"><img src="uploadedimages/System/Static_Images/search_button.png"></a>
</div>
</td>
</tr>
</tbody></table>
</div>
</div>
</div>
ASPX Code :
<style type="text/css">
#UpdateProgress1 {
background-color:#CF4342;
color:#fff;
top:0px;
right:0px;
position:fixed;
}
#UpdateProgress1 img {
vertical-align:middle;
margin:2px;
}
</style>
<asp:UpdateProgress ID="UpdateProgress2" runat="server" DynamicLayout="false">
<ProgressTemplate>
<div class="progress">
<img src="Images/ajax-loader.gif" />
Please Wait...
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<div id="Main">
<table>
<tr>
<td class="style3">
<asp:UpdatePanel ID="UP1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="ddlTypes" runat="server" AutoPostBack="true"
Width="208px" />
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<td class="style3">
<asp:UpdatePanel ID="UP2" runat="server">
<ContentTemplate>
<asp:DropDownList ID="ddlSchemes" runat="server" Width="208px" AutoPostBack="true"
EnableViewState="true">
</asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlTypes" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<td align="right">
<asp:UpdatePanel ID="UP3" runat="server">
<ContentTemplate>
<asp:HyperLink ID="HypView" runat="server"><img src="uploadedimages/System/Static_Images/search_button.png" /></asp:HyperLink>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlSchemes" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</table>
</div>
I have a one dropdown box in webpage that is with autopostback = true and one modal popup extender in same webp age.. When i changed the selection and then open modal popup and enter value then close the modal popup.. It will postback and entered value does not display when open modal popup again....How i prevent postback when close modalpopup and getting same value again...
Please help for the same...My code is given below:
<asp:DropDownList runat="server" ID="ddlDBANameFormField" AutoPostBack="true" >
<asp:ListItem Selected="True" Text="Select"></asp:ListItem>
<asp:ListItem Text="One"></asp:ListItem>
<asp:ListItem Text="Two"></asp:ListItem>
<asp:ListItem Text="Three"></asp:ListItem>
</asp:DropDownList>
<div id="tempHotelStatistic">
<div id="MainHotelStatistic" style="width: 998px;" runat="server">
<div style="width: 330px; height: 30px; float: left;" id="RoomsRentedAfterAudit"
runat="server">
<div style="width: 150px; float: left;">
<asp:Label ID="lblRoomsRentedAfterAudit" runat="server" Text="After Audit Rooms:"
Width="175px" CssClass="label"></asp:Label>
</div>
<asp:UpdatePanel UpdateMode="Conditional" runat="server" ID="UpdatePanel3">
<ContentTemplate>
<div style="width: 150px; float: left;">
<table>
<tr>
<td>
<asp:TextBox ID="txtRoomsRentedAfterAudit" runat="server" CssClass="textboxpopup"></asp:TextBox>
<cc1:ModalPopupExtender ID="ModalPopupExtender4" OkControlID="ModalOKButtonRoomsRented"
runat="server" TargetControlID="btnpopupRoomsRented" CancelControlID="btnpopupCancelRoomsRented"
PopupControlID="PanelRoomRented" Drag="true" PopupDragHandleControlID="PopupHeader1" >
</cc1:ModalPopupExtender>
</td>
<td>
<asp:Button ID="btnpopupRoomsRented" runat="server" Text="...." CssClass="buttonpopup"
Style="color: #333333; margin-left: 0; margin-right: 0; width: 35px;" />
</td>
</tr>
</table>
</div>
<div id="PanelRoomRented" style="display: none;" class="popupConfirmation">
<div class="popup_Container">
<div class="popup_Titlebar" id="Div3">
<div class="TitlebarLeft">
Reason :
</div>
<div>
<asp:Button ID="btnpopupCancelRoomsRented" class="TitlebarRight " runat="server" />
</div>
</div>
<div>
<table>
<tr>
<td valign="top" height="5px">
</td>
</tr>
<tr>
<td valign="bottom">
<textarea id="txtRoomsRentedAfterAuditReason" runat="server" rows="20" cols="20"
style="width: 270px; height: 100px;"></textarea>
</td>
</tr>
<tr>
<td valign="top" height="5px">
</td>
</tr>
</table>
</div>
</div>
<div class="popup_Container" align="right">
<asp:Button ID="ModalOKButtonRoomsRented" runat="server" Width="60px" Text="OK" CssClass="buttonForPopUp" />
</div>
</div>
<cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender111" runat="server" FilterType="Custom,Numbers"
ValidChars="-" FilterMode="ValidChars" TargetControlID="txtRoomsRentedAfterAudit">
</cc1:FilteredTextBoxExtender>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnpopupRoomsRented" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
</div>
Solved the problem by applying trigger for the update panel , in which modal popup resides...
<Triggers>
<asp:PostBackTrigger ControlID="ddlDBANameFormField" />
</Triggers>
I am using an ajax collapsiblepanel extender in a webapp (asp.net) designed for IE 6. Currently for making the application compatible with IE 8 i have added a metatag - .
Everything in the application works fine except the collapsible panels using the ajax control.
These panels are always expanded.
Any idea on how to ensure the panels collapse and expand as expected in IE 8.
Note - i have tried changing the css class for collPanel where overflow:hidden is present to display:none but this kept the panel only collapsed.
Code snippet:
<cc1:CollapsiblePanelExtender ID="ColPnlExtAddUser" runat="server" TargetControlID="pnlAddContentUser"
ExpandControlID="pnlAddHeaderUser" CollapseControlID="pnlAddHeaderUser" Collapsed="True"
ImageControlID="ImgBtnAddUser" ExpandedText="(Hide Details...)" CollapsedText="(Show Details...)"
ExpandedImage="~/images/collapse.jpg" CollapsedImage="~/images/expand.jpg" SuppressPostBack="true"
TextLabelID="lblShowUser" BehaviorID="ColPnlExtAddUserBehavior">
</cc1:CollapsiblePanelExtender>
<asp:Panel Style="cursor: pointer" ID="pnlAddHeaderUser" runat="server" CssClass="collHeader">
<div style="padding: 2px; cursor: pointer; vertical-align: middle;">
<div id="Div2" style="float: left;">
<asp:Label ID="labelUserManagement" runat="server" Text="Add User"></asp:Label>
</div>
<div style="float: left; margin-left: 20px;">
<asp:Label ID="lblShowUser" runat="server">(Show Details...)</asp:Label>
</div>
<div style="float: right; vertical-align: middle;">
<asp:ImageButton ID="ImgBtnAddUser" runat="server" ImageUrl="~/images/expand.jpg"
AlternateText="(Show Details...)" />
</div>
</div>
</asp:Panel>
<asp:Panel Style="overflow: hidden" ID="pnlAddContentUser" runat="server" CssClass="collPanel"
Height="0px">
<table id="tblAddUserDetails" width="100%" runat="server">
<tbody>
<tr>
<td align="left">
<a class="labelText">First Name</a>
</td>
<td>
<asp:TextBox ID="firstNameTextbox" runat="Server" MaxLength="20" Width = "48%"></asp:TextBox>
</td>
</tr>
<tr>
<td align="left">
<a class="labelText">Last Name</a>
</td>
<td >
<asp:TextBox ID="lastNameTextbox" runat="Server" MaxLength="20" Width = "48%"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right" colspan="2">
<asp:LinkButton ID="saveUserLinkButton" runat="server" CssClass="btnSimpleSave" OnClick="saveUserLinkButton_Click" >Save</asp:LinkButton>
</td>
</tr>
</tbody>
</table>
</asp:Panel>
ya sometime it support by some version of IE, i suggest you to use Jquery, it is easy and powerful.
I have an ASP.NET control. I want to align the textbox to the right and the label to the left.
I have this code so far:
<td colspan="2">
<asp:Label ID="Label6" runat="server" Text="Label"></asp:Label>
<div style="text-align: right">
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
</div>
</td>
The textbox aligns to the right, but the label aligns to the left and on the line above. How can I fix this so that the label is on the left, the textbox on the right, and both on the same line?
Thanks
you can use style
<td colspan="2">
<div style="float:left; width:80px"><asp:Label ID="Label6" runat="server" Text="Label"></asp:Label></div>
<div style="float: right; width:100px">
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
</div>
<div style="clear:both"></div>
</td>
You should use CSS to align the textbox. The reason your code above does not work is because by default a div's width is the same as the container it's in, therefore in your example it is pushed below.
The following would work.
<td colspan="2" class="cell">
<asp:Label ID="Label6" runat="server" Text="Label"></asp:Label>
<asp:TextBox ID="TextBox3" runat="server" CssClass="righttextbox"></asp:TextBox>
</td>
In your CSS file:
.cell
{
text-align:left;
}
.righttextbox
{
float:right;
}
You can do it with a table, like this:
<table width="100%">
<tr>
<td style="width: 50%">Left Text</td>
<td style="width: 50%; text-align: right;">Right Text</td>
</tr>
</table>
Or, you can do it with CSS like this:
<div style="float: left;">
Left text
</div>
<div style="float: right;">
Right text
</div>