dotnetdevcsharp
Reputation: 3980
2 column form side by side not inline
I have a form that I want in 2 columns well the first have of the form in column 1 then second half in column 2 so not strickly inline. The result I am getting is one big form I am wanting the form to be a clone of the first lot of fields down to ALM Check its basically so a partner can enter their details of a joint application so need address name and all to line up
<asp:UpdatePanel ID="uptPanelPersonalDetails" runat="server"><ContentTemplate>
<fieldset>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Is Joint Application</label>
<div class="col-md-8">
<label class="checkbox">
<telerik:RadCheckBox AutoPostBack="true" OnCheckedChanged="chkIsJointApplication_CheckedChanged" Skin="Bootstrap" ID="chkIsJointApplication" runat="server"></telerik:RadCheckBox>
</label>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">IVA Code</label>
<div class="col-md-8">
<telerik:RadTextBox ID="txtIVACode" CssClass="form-control" Width="20%" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">
First Name</label>
<div class="col-md-8">
<telerik:RadTextBox ID="txtFirstName" CssClass="form-control" Width="60%" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Middle Name</label>
<div class="col-md-8">
<telerik:RadTextBox ID="txtMiddle" CssClass="form-control" Width="20%" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">
Surname</label>
<div class="col-md-8">
<telerik:RadTextBox ID="txtSurname" CssClass="form-control" Width="60%" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Saluatation</label>
<div class="col-md-8">
<telerik:RadComboBox ID="rdSaluation" Width="50%" Skin="Bootstrap" EmptyMessage="Please Select" runat="server"></telerik:RadComboBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Ailases</label>
<div class="col-md-8">
<telerik:RadTextBox ID="txtAilases" CssClass="form-control" Width="40%" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Marital Status</label>
<div class="col-md-8">
<telerik:RadComboBox ID="rdMartialStatus" Width="50%" Skin="Bootstrap" EmptyMessage="Please Select" runat="server"></telerik:RadComboBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Introducer Name</label>
<div class="col-md-8">
<telerik:RadComboBox ID="txtIntroducerName" Width="50%" Skin="Bootstrap" EmptyMessage="Please Select" runat="server"></telerik:RadComboBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Address Line 1</label>
<div class="col-md-8">
<telerik:RadTextBox ID="txtAddressLine1" CssClass="form-group-lg" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Address Line 2</label>
<div class="col-md-8">
<telerik:RadTextBox ID="txtAddressLine2" CssClass="form-group-lg" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">City</label>
<div class="col-md-8">
<telerik:RadTextBox ID="txtCity" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Post Code</label>
<div class="col-md-8">
<telerik:RadTextBox ID="txtPostCode" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">County</label>
<div class="col-md-8">
<telerik:RadComboBox ID="dpCounty" CssClass="form-group-lg" Width="50%" Skin="Bootstrap" EmptyMessage="Please Select" runat="server"></telerik:RadComboBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Country</label>
<div class="col-md-8">
<telerik:RadComboBox ID="dpCountry" Width="50%" CssClass="form-group-lg" Skin="Bootstrap" EmptyMessage="Please Select" runat="server"></telerik:RadComboBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Date Of Birth</label>
<div class="col-md-8">
<telerik:RadDatePicker ID="rdDob" Skin="Bootstrap" runat="server"></telerik:RadDatePicker>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Age</label>
<div class="col-md-8">
<telerik:RadTextBox ID="txtAge" CssClass="form-group-lg" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Home Tel NO.</label>
<div class="col-md-8">
<telerik:RadTextBox ID="txtHomeTelNo" CssClass="form-group-lg" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Work Tel No</label>
<div class="col-md-8">
<telerik:RadTextBox ID="txtWorkTelNo" CssClass="form-group-lg" runat="server"></telerik:RadTextBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Fax No</label>
<div class="col-md-8">
<telerik:RadTextBox ID="txtFaxNo" CssClass="form-group-lg" runat="server"></telerik:RadTextBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Mobile No</label>
<div class="col-md-8">
<telerik:RadTextBox ID="txtMobileNo" CssClass="form-group-lg" runat="server"></telerik:RadTextBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Best Time to Call</label>
<div class="col-md-8">
<telerik:RadTextBox ID="txtBestTimeToCall" CssClass="form-group-lg" runat="server"></telerik:RadTextBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Prefered Contact Method</label>
<div class="col-md-8">
<telerik:RadComboBox ID="rdPreferedContactMethod" Width="50%" CssClass="form-group-lg" EmptyMessage="Please Select" runat="server"></telerik:RadComboBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Best Time to Call</label>
<div class="col-md-8">
<telerik:RadTextBox ID="txtEmail" CssClass="form-group-lg" runat="server"></telerik:RadTextBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Gender</label>
<div class="col-md-8">
<telerik:RadComboBox ID="rdGender" Width="50%" Skin="Bootstrap" EmptyMessage="Please Select" runat="server"></telerik:RadComboBox>
</div>
</div>
</fieldset>
<fieldset>
<asp:Panel ID="pnlPartnerDetails" runat="server" Visible="true">
Partner Details
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">
First Name</label>
<div class="col-md-8">
<telerik:RadTextBox ID="RadTextBox1" CssClass="form-control" Width="60%" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Middle Name</label>
<div class="col-md-8">
<telerik:RadTextBox ID="RadTextBox2" CssClass="form-control" Width="20%" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">
Surname</label>
<div class="col-md-8">
<telerik:RadTextBox ID="RadTextBox3" CssClass="form-control" Width="60%" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Saluatation</label>
<div class="col-md-8">
<telerik:RadComboBox ID="RadComboBox1" Width="50%" Skin="Bootstrap" EmptyMessage="Please Select" runat="server"></telerik:RadComboBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Ailases</label>
<div class="col-md-8">
<telerik:RadTextBox ID="RadTextBox4" CssClass="form-control" Width="40%" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Marital Status</label>
<div class="col-md-8">
<telerik:RadComboBox ID="RadComboBox2" Width="50%" Skin="Bootstrap" EmptyMessage="Please Select" runat="server"></telerik:RadComboBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Introducer Name</label>
<div class="col-md-8">
<telerik:RadComboBox ID="RadComboBox3" Width="50%" Skin="Bootstrap" EmptyMessage="Please Select" runat="server"></telerik:RadComboBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Address Line 1</label>
<div class="col-md-8">
<telerik:RadTextBox ID="RadTextBox5" CssClass="form-group-lg" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Address Line 2</label>
<div class="col-md-8">
<telerik:RadTextBox ID="RadTextBox6" CssClass="form-group-lg" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">City</label>
<div class="col-md-8">
<telerik:RadTextBox ID="RadTextBox7" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Post Code</label>
<div class="col-md-8">
<telerik:RadTextBox ID="RadTextBox8" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">County</label>
<div class="col-md-8">
<telerik:RadComboBox ID="RadComboBox4" CssClass="form-group-lg" Width="50%" Skin="Bootstrap" EmptyMessage="Please Select" runat="server"></telerik:RadComboBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Country</label>
<div class="col-md-8">
<telerik:RadComboBox ID="RadComboBox5" Width="50%" CssClass="form-group-lg" Skin="Bootstrap" EmptyMessage="Please Select" runat="server"></telerik:RadComboBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Date Of Birth</label>
<div class="col-md-8">
<telerik:RadDatePicker ID="RadDatePicker1" Skin="Bootstrap" runat="server"></telerik:RadDatePicker>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Age</label>
<div class="col-md-8">
<telerik:RadTextBox ID="RadTextBox9" CssClass="form-group-lg" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Home Tel NO.</label>
<div class="col-md-8">
<telerik:RadTextBox ID="RadTextBox10" CssClass="form-group-lg" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Work Tel No</label>
<div class="col-md-8">
<telerik:RadTextBox ID="RadTextBox11" CssClass="form-group-lg" runat="server"></telerik:RadTextBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Fax No</label>
<div class="col-md-8">
<telerik:RadTextBox ID="RadTextBox12" CssClass="form-group-lg" runat="server"></telerik:RadTextBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Mobile No</label>
<div class="col-md-8">
<telerik:RadTextBox ID="RadTextBox13" CssClass="form-group-lg" runat="server"></telerik:RadTextBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Best Time to Call</label>
<div class="col-md-8">
<telerik:RadTextBox ID="RadTextBox14" CssClass="form-group-lg" runat="server"></telerik:RadTextBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Prefered Contact Method</label>
<div class="col-md-8">
<telerik:RadComboBox ID="RadComboBox6" Width="50%" CssClass="form-group-lg" EmptyMessage="Please Select" runat="server"></telerik:RadComboBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Best Time to Call</label>
<div class="col-md-8">
<telerik:RadTextBox ID="RadTextBox15" CssClass="form-group-lg" runat="server"></telerik:RadTextBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Gender</label>
<div class="col-md-8">
<telerik:RadComboBox ID="RadComboBox7" Width="50%" Skin="Bootstrap" EmptyMessage="Please Select" runat="server"></telerik:RadComboBox>
</div>
</div>
Upvotes: 0
Views: 64
Answers (1)
user2721607
Reputation: 318
I like to use on Offset when creating a multi column form. Here is an example using bootstrap that has a label in the first 2 columns, a field in the next 4, a label in columns 7 and 8 and a field in columns 9-12
<div class="row">
<label class="col-sm-2" for="intIncidentID">Incident ID</label>
<div class="col-sm-4">
<telerik:RadTextBox ID="txtIncidentID" runat="server" ReadOnly="true"></telerik:RadTextBox>
</div>
<label class="col-sm-2 offset-6" for="intShip">Ship</label>
<div class="col-sm-4 offset-8">
<telerik:RadComboBox ID="intShip" runat="server" Width="100%"></telerik:RadComboBox>
</div>
</div>
Upvotes: 1
Related Questions
- How can I write 'a:hover' in inline CSS?
- How can I make a div not larger than its contents?
- Twitter Bootstrap Form File Element Upload Button
- Center a column using Twitter Bootstrap
- How to remove the space between inline/inline-block elements?
- label and input in same line on form-group
- What is the difference between display: inline and display: inline-block?
- twitter bootstrap autocomplete dropdown / combobox with Knockoutjs
- bootstrap form too large