how to put 4 control on a line in asp.net? - html

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>

Related

How to add an onClick event to an HTML radio button in asp.net

I have multiple tabs on my page and currently I am binding all dropdownlists on every tab at page load.
I want to bind the dropdownlists only when the tab is selected. I also want to clear the gridviews when the tab is changed.
This is my HTML code
<li>
<input type="radio" id="tab1d" name="tabs1" runat="server"/>
<label for="tab1d">Search</label>
<div id="tab-content1d" class="tab-content animated fadeIn" style="background-color:white; padding:10px; ">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label4" runat="server" Text="Select Platform"></asp:Label>
<asp:DropDownList ID="DropDownList3" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList3_SelectedIndexChanged" CssClass="inputs" Width="150px"></asp:DropDownList>
<asp:Label ID="Label10" runat="server" Text="Select Family Name"></asp:Label>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" CssClass="inputs" Width="150px" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"></asp:DropDownList>
<asp:Label ID="Label11" runat="server" Text="Select price Level"></asp:Label>
<asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="true" CssClass="inputs" Width="150px" ></asp:DropDownList>
<asp:Button ID="Button7" runat="server" Text="Search" CssClass="buttons" OnClick="Button7_Click"/><br /><br />
<div id="gdvLeft">
<asp:GridView ID="gdvFamilyname" runat="server" EnableViewState="True" class="grid" RowStyle-CssClass="rows"></asp:GridView>
</div>
<div id="gdvRight">
<asp:GridView ID="gdvQuantity" runat="server" EnableViewState="True" class="grid" RowStyle-CssClass="rows"></asp:GridView>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</li>

Hi Himani, Try like this -
<input type="radio" value="Click Me" onclick="rdioClick();" />
In Javascript -
function rdioClick() {
var GridView1 = document.getElementById('GridView1');
GridView1.innerHTML = "";
}
Thanks :)

align asp textbox control to the right

I seem to have a problem aligning my textbox control to the right. I want it so First Name, Middle Name & Last Name are on the left but the textbox control is positioned on the right within the Div class border col-sm-4 (33.33% of the screen)
<div class="container">
<div class="border row">
<div class="border col-sm-4"> First Name: <asp:TextBox ID="First_NameTextBox" runat="server" Text='<%# Bind("First_Name") %>' />
</div>
<div class="border col-sm-4"> Middle Name: <asp:TextBox ID="Middle_NameTextBox" runat="server" Text='<%# Bind("Middle_Name") %>' />
</div>
<div class="border col-sm-4"> Last Name: <asp:TextBox ID="Last_NameTextBox" runat="server" Text='<%# Bind("Last_Name") %>' />
</div>
</div>
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
any help with this would be amazing.

Check below changes
Wrap the text in a label or span and add CSS to float left
Style the textboxes to float right
Add clear:both to your CSS class border
.container span {
float: left;
}
.container input[type="text"] {
float: right
}
.border {
clear: both;
}
<div class="container">
<div class="border row">
<div class="border col-sm-4"><span>First Name:</span>
<asp:TextBox ID="First_NameTextBox" runat="server" Text='<%# Bind("First_Name") %>' />
</div>
<div class="border col-sm-4"><span>Middle Name:</span>
<asp:TextBox ID="Middle_NameTextBox" runat="server" Text='<%# Bind("Middle_Name") %>' />
</div>
<div class="border col-sm-4"><span>Last Name:</span>
<asp:TextBox ID="Last_NameTextBox" runat="server" Text='<%# Bind("Last_Name") %>' />
</div>
</div>

Position: Fixed makes div go out of page

The problem is that my ASP controls go out of bounds on the right side of the screen when using the .Fixed class from my CSS.
I tried the 'right: 0; thing but no luck...
See this image.
CSS:
#parent {
display: inline-flex;
}
#narrow {
width: 1000px;
margin-right: 20px;
}
#wide {
width: 100%;
}
.FullWidth {
width:100%;
}
.Fixed {
position: fixed;
}
Short HTML (in asp.net)
<div id="parent">
<div id="narrow">
Contains left gridview
</div>
<div id="parent">
<div id="narrow">
Gridview
</div>
<div id="wide" class="Fixed">
<div>
FormView
</div>
<div>
Contains label and textbox
</div>
</div>
<br />
<div>
Contains right gridview
</div>
<hr />
<div>
Contain textbox and button
</div>
</div>
</div>
Complete HTML
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPages/Security.Master" EnableEventValidation="false" AutoEventWireup="true" CodeBehind="Reports_Read.aspx.cs" Inherits="SecurityV3_Web.ContentPages.Reports.Reports_Read" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="parent">
<div id="narrow">
<asp:GridView ID="grdReports" runat="server" DataKeyNames="ReportID" AutoGenerateColumns="false" OnRowDataBound="grdReports_RowDataBound" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
<Columns>
<asp:BoundField HeaderText="ID" DataField="ReportID" ItemStyle-Width="40px" />
<asp:BoundField HeaderText="Time" DataField="Time" ItemStyle-Width="40px" />
<asp:BoundField HeaderText="Agent" DataField="Name" />
<asp:BoundField HeaderText="Location" DataField="Location" />
<asp:BoundField HeaderText="Header" DataField="Heading" />
</Columns>
</asp:GridView>
</div>
<div id="wide" class="Fixed">
<div>
<asp:FormView ID="FormView1" runat="server" CssClass="FullWidth">
<EmptyDataTemplate>
<p>No data to show. Select a report.</p>
</EmptyDataTemplate>
<ItemTemplate>
<div>
<asp:Label ID="Label1" runat="server" Text="Heading"></asp:Label>
<asp:TextBox ID="txtHeading" runat="server" Text='<%# Eval("Heading") %>'></asp:TextBox>
</div>
<div>
<asp:Label ID="Label2" runat="server" Text="Report"></asp:Label><br />
<asp:TextBox ID="txtReport" runat="server" Text='<%# Eval("Report1") %>' Height="200px" CssClass="FullWidth" TextMode="MultiLine"></asp:TextBox>
</div>
</ItemTemplate>
</asp:FormView>
</div>
<br />
<div>
<asp:GridView ID="grdReplies" runat="server" DataKeyNames="ReportReplyID" AutoGenerateColumns="false">
<Columns>
<asp:BoundField HeaderText="ID" DataField="ReportReplyID" ItemStyle-Width="40px" />
<asp:BoundField HeaderText="Time" DataField="Time" ItemStyle-Width="40px" />
<asp:BoundField HeaderText="Agent" DataField="Name" ItemStyle-Width="100px" />
<asp:BoundField HeaderText="Reply" DataField="Reply1" />
</Columns>
</asp:GridView>
</div>
<hr />
<div>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="This field is required" CssClass="Foutmelding" ControlToValidate="txtReply"></asp:RequiredFieldValidator>
<asp:TextBox ID="txtReply" runat="server" TextMode="MultiLine"></asp:TextBox>
<br />
<asp:Button ID="btnSaveReply" runat="server" Text="Reply" OnClick="btnSaveReply_Click" />
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
Fiddle

right: 0 is just aligning the fixed element to the right, however it is still full width from the wide ID which makes it take up the whole page. Is { width: auto; right: 0; } an option? That sounds like it would do what you want it to

how to control space between radiobuttons of the radiobuttonlist control

I am having lot of space between newly added radiobuttons(yes and No) of the RadioButtonList and the first part of the existing region(divName) is aligned properly.
can any body help me in aligning the newly added second region(div1)
<div id="divpanelFacts" runat="server">
<fieldset id="panelFacts">
<table width="100%">
<tr>
<td>
<div id="divName" runat="server" visible="false">
<span>
<label runat="server" id="Label1">
<span id="pNameSpan" runat="server">*</span>P Name</label>
<asp:TextBox ID="textPName" runat="server" MaxLength="20"></asp:TextBox>
</span>
</div>
</td>
<td>
<div id="div1" runat="server" visible="false">
<asp:Label ID="lbl1" runat="server" Text="Would like to use this option for document purpose"></asp:Label>
<asp:RadioButtonList ID="rbl1" runat="server" TextAlign="Left" RepeatDirection="Horizontal">
<asp:ListItem Value="Yes" Text="Yes" />
<asp:ListItem Value="No" Text="No" Selected="True" />
</asp:RadioButtonList>
</div>
</td>
</tr>
</table>
</fieldset>
</div>

Your table width is at 100%, which means it's going to stretch it, and table I think takes precedence.

Styling a repeater inside a datalist

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