I am trying to create a fluid one-row form with text boxes, with each textbox having its corresponding label on top of it. Just like a table with a header and only one data-row, something roughly like this (but hopefully prettier...):
http://jsfiddle.net/52VtD/5553/
The form should preferably be fluid, so that the text boxes resize as needed (but the labels should always stay on top of their respective textbox).
Here is one unsuccessful attempt:
http://jsfiddle.net/fJ7Hb/3/
<form class="form-horizontal">
<div class="row">
<label class="col-sm-1">Item #</label>
<div class="col-sm-2"><input type="text" class="form-control" /></div>
<label class="col-sm-1">Description</label>
<div class="col-sm-2"><input type="text" class="form-control" /></div>
<label class="col-sm-1">Qty</label>
<div class="col-sm-1"><input type="text" class="form-control" /></div>
<label class="col-sm-1">Price</label>
<div class="col-sm-1"><input type="text" class="form-control" /></div>
<label class="col-sm-1">Total</label>
<div class="col-sm-1"><input type="text" class="form-control" /></div>
</div>
</form>
Help would be appreciated.
You can wrap each of your columns in a div tag and then work with some css elements to set display and where you want each item.
Here's the fiddle : http://jsfiddle.net/fJ7Hb/6/
HTML
<div class="row">
<div>
<label class="col-sm-1">Item #</label>
<div class="col-sm-1"><input type="text" class="form-control" /></div>
</div>
<div>
<label class="col-sm-1">Description</label>
<div class="col-sm-2"><input type="text" class="form-control" /></div>
</div>
<div>
<label class="col-sm-1">Qty</label>
<div class="col-sm-1"><input type="text" class="form-control" /></div>
</div>
<div>
<label class="col-sm-1">Price</label>
<div class="col-sm-1"><input type="text" class="form-control" /></div>
</div>
<div>
<label class="col-sm-1">Total</label>
<div class="col-sm-1"><input type="text" class="form-control" /></div>
</div>
</div>
CSS
.row {
width: 1100px;
}
.row > div {
display: inline-block;
}
Related
I have html code which allows a user to select a percentage with an input type range. This is the code I am using:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<label for="beneName">Name</label>
<input class="form-control form-control-sm" type="text" name="beneName" id="beneName" placeholder="#Model.BeneficiaryUpdateData[r].beneName" required="">
</div>
</div>
<div class="row">
<div class="col-md-12">
<label for="beneAddressLine1">Address Line 1</label>
<input class="form-control" type="text" name="beneAddressLine1" id="beneAddressLine1" placeholder="#Model.BeneficiaryUpdateData[r].beneAddressLine1" required="">
</div>
</div>
<div class="row">
<div class="col-md-12">
<label for="beneAddressLine2">Address Line 2</label>
<input class="form-control" type="text" name="beneAddressLine2" id="beneAddressLine2" placeholder="#Model.BeneficiaryUpdateData[r].beneAddressLine2" required="">
</div>
</div>
<div class="row">
<div class="col-md-12">
<label for="beneAddressLine3">Address Line 3</label>
<input class="form-control" type="text" name="beneAddressLine3" id="beneAddressLine3" placeholder="#Model.BeneficiaryUpdateData[r].beneAddressLine3" required="">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="beneSSN">Social Security Number</label>
<input class="form-control" type="text" name="beneSSN" id="beneSSN" placeholder="#Model.BeneficiaryUpdateData[r].beneSSN" required="">
</div>
<div class="col-mid-6">
<div class="form-group">
<label for="benePercent" class="form-label">Percentage</label>
<input type="range" name="benePercent" id="benePercent" class="percentAlign" value="#Model.BeneficiaryUpdateData[r].benePctInt" min="0" max="100" oninput="this.nextElementSibling.value = this.value">
<output class="percentAlign">#Model.BeneficiaryUpdateData[r].benePctInt</output>
</div>
</div>
</div>
And this is the css for percentAlign:
.percentAlign {
display: inline-block;
vertical-align: middle;
}
And this is what gets generated:
I dont understand why the percent value displays below the slider and not next to it.
Any assistance is greatly appreciated.
Thank you.
First edit: A slight change suggested by Drexx_Dusan. Now, the slider reaches to the end of the <DIV> but the <OUTPUT> is still displaying underneath the slider, not next to it.
It doesn't work because you have col-mid-6 instead of col-md-6, in the div above last form group.
I am new and learning front end.
I created a simple form contains 4 fields. how to align all these in line equally divided?
below is my code written on HTML along with the output what i see:
<div>
<form>
<div class="form-inline">
<div class="col-sm-6">
<label>Name: </label>
<input type="text" class="form-control" >
</div>
<div class="col-sm-6">
<label>Email: </label>
<input type="text" class="form-control" >
</div>
<br>
<br>
<div class="col-sm-6">
<label>Phone #: </label>
<input type="text" class="form-control" >
</div>
<div class="col-sm-6">
<label>Education Qualificiation: </label>
<input type="text" class="form-control" >
</div>
</div>
</form>
</div>
Output above code
You can do something like this:
fiddle to validate
.lblClass {
width: 50%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div>
<form>
<div class="form-inline d-flex">
<div class="col-sm-6 d-flex">
<label class="lblClass">Name: </label>
<input type="text" class="form-control">
</div>
<div class="col-sm-6 d-flex">
<label class="lblClass">Email: </label>
<input type="text" class="form-control">
</div>
<br>
<br>
<div class="col-sm-6 d-flex">
<label class="lblClass">Phone #: </label>
<input type="text" class="form-control">
</div>
<div class="col-sm-6 d-flex">
<label class="lblClass">Education Qualificiation: </label>
<input type="text" class="form-control">
</div>
</div>
</form>
</div>
There are lots of ways to align element. But here you are uses bootstrap and bootstrap have predefined classes for align element. You want to align elements in the form so bootstrap have Form-group, form control class for your all. Problems
Visit this link for more info
https://getbootstrap.com/docs/4.3/components/forms/
Without the use of tables, using CSS, how can i align a group of labels and their associated input controls like below (these controls will be in a div):
The controls will be laid out like:
[Label1] [Input1] [Label4] [Input4]
[Label2] [Input2] [Label5] [Input5]
[Label3] [Input3] [Label6] [Input6]
This is kind of open-ended, since a lot depends on the questions, the labels and other specific considerations that you may have for your code.
However, the easiest way to accomplish something like this (IE8+) is probably to use display:table and display:table-cell.
Here's a quick fiddle that basically does that: http://jsfiddle.net/cwz3g/
It uses a lot of divs: one per column, one per label/field pairing and one each for the label and field, but should cover a lot of the common things like vertical alignment of labels and fields. You'll probably just need to tweak some things for your code situation, but it should get you started.
For your two columns, you'll want to put them in container divs, which could then be floated against each other or absolutely positioned, or whatever works for your layout.
To make the labels take up the same amount of room, they can be styled with a width attribute.
Finally, in your diagram, you've got the labels left-justified and the inputs right-justified. That's doable, but to my eyes it scans better if the inputs are justified toward their labels.
I've got it all in a fiddle here: http://jsfiddle.net/M7AjF/
<div class="form-column">
<label for="Input1">Option 1</label>
<select id="Input1"><option>All</option></select>
<br>
<label for="Input2">Option 2</label>
<input id="Input2" type="text"/>
<br>
<label for="Input3">Option 3</label>
<input id="Input3" type="text"/>
</div>
<div class="form-column">
<label for="Input4">Option 4</label>
<select id="Input4"><option>--</option></select>
<br>
<label for="Input5">Option 5</label>
<select id="Input5"><option>0</option></select>
<br>
<label for="Input6">Option 6</label>
<select id="Input6"><option>1</option></select>
</div>
And the css:
.form-column {
width: 50%;
float:left;
}
.form-column label {
width: 40%;
padding-right: 10%;
}
/*
This right justifies your inputs, which I don't recommend.
.form-column select, .form-column input {
float: right;
}
.form-column br {
clear: right;
}
*/
I suggest to use display:table layout like this:
html
<div class="table">
<div class="row">
<div class="cell"><label>Option 1</label></div>
<div class="cell"><select><option>ALL</option></select></div>
<div class="cell"><label>Option 4</label></div>
<div class="cell"><select><option>--</option></select></div>
</div>
<div class="row">
<div class="cell"><label>Option 2</label></div>
<div class="cell"><input type="text"></input></div>
<div class="cell"><label>Option 5</label></div>
<div class="cell"><input type="text"></input></div>
</div>
<div class="row">
<div class="cell"><label>Option 3</label></div>
<div class="cell"><input type="text"></input></div>
<div class="cell"><label>Option 6</label></div>
<div class="cell"><select><option>1</option></select></div>
</div>
</div>
css
.table{
display:table;
}
.row{
display:table-row;
}
.cell{
display:table-cell;
}
.table > .row > .cell{
text-align: right;
padding-right: 75px;
}
.table > .row > .cell > input{
width:75px;
}
fiddle
you can use bootstrap.css for easy way.
http://getbootstrap.com/components/
check my fiddle.
<form class="form-horizontal" role="form" method="post" action="">
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-4">Title</label>
<div class="col-xs-8">
<input name="title" type="text" class="form-control" value="Circular Countdown"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-4">Title</label>
<div class="col-xs-8">
<input name="title" type="text" class="form-control" value="Circular Countdown"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-4">Title</label>
<div class="col-xs-8">
<input name="title" type="text" class="form-control" value="Circular Countdown"/>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-4">Title</label>
<div class="col-xs-8">
<input name="title" type="text" class="form-control" value="Circular Countdown"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-4">Title</label>
<div class="col-xs-8">
<input name="title" type="text" class="form-control" value="Circular Countdown"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-4">Title</label>
<div class="col-xs-8">
<input name="title" type="text" class="form-control" value="Circular Countdown"/>
</div>
</div>
</div>
</form>
http://jsfiddle.net/4M7qH/
I want to align 2 input groups, one with span 8 & other with 4 next to each other. I used form inline but it doesn't take the intended width.
<div class="form-inline">
<div class="form-group">
<!-- <div class="input-group"> -->
<input type="text" class="form-control col-sm-8" placeholder="Username">
<!-- </div> -->
</div>
<div class="form-group">
<!-- <div class="input-group"> -->
<input type="text" class="form-control col-sm-4" placeholder="Ref No.">
</div>
</div>
try the following css
.form-group{
float:left;
}
After playing around i found this solution:
HTML
<div class="row form-input">
<div class="col-sm-8">
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="ref no.">
</div>
</div>
<div class="row form-input">
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Monthly Rent">
</div>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Deposit">
</div>
</div>
CSS
.form-input, .form-input input{
margin-top: 10px;
}
I want to build a form in Bootstrap 3 like this:
My site (not the above link) just updates from Bootstrap 2.3.2 and the format is not correct anymore.
I cannot find any doc about this type of form on getbootstrap.com.
Could anyone tell me how to do this? Only 'Username' would be OK.
Thanks.
PS There is a similar question but it's using Bootstrap 2.3.2.
I have created a demo for you.
Here is how your nested structure should be in Bootstrap 3:
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday</label>
<div class="col-xs-10">
<div class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="year"/>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="month"/>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="day"/>
</div>
</div>
</div>
</div>
Notice how the whole form-inline is nested within the col-xs-10 div containing the control of the horizontal form. In other terms, the whole form-inline is the "control" of the birthday label in the main horizontal form.
Note that you will encounter a left and right margin problem by nesting the inline form within the horizontal form. To fix this, add this to your css:
.form-inline .form-group{
margin-left: 0;
margin-right: 0;
}
Another option is to put all of the fields that you want on a single line within a single form-group.
See demo here
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-xs-2 control-label">Name</label>
<div class="col-xs-10">
<input type="text" class="form-control col-sm-10" name="name" placeholder="name"/>
</div>
</div>
<div class="form-group">
<label for="birthday" class="col-xs-3 col-sm-2 control-label">Birthday</label>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="year"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="month"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="day"/>
</div>
</div>
</form>
This Bootply example seems like a much better option. Only thing is that the labels are a little too high so I added padding-top:5px to center them with my inputs.
<div class="container">
<h2>Bootstrap Mixed Form <p class="lead">with horizontal and inline fields</p></h2>
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="col-sm-1" for="inputEmail1">Email</label>
<div class="col-sm-5"><input type="email" class="form-control" id="inputEmail1" placeholder="Email"></div>
</div>
<div class="form-group">
<label class="col-sm-1" for="inputPassword1">Password</label>
<div class="col-sm-5"><input type="password" class="form-control" id="inputPassword1" placeholder="Password"></div>
</div>
<div class="form-group">
<label class="col-sm-12" for="TextArea">Textarea</label>
<div class="col-sm-6"><textarea class="form-control" id="TextArea"></textarea></div>
</div>
<div class="form-group">
<div class="col-sm-3"><label>First name</label><input type="text" class="form-control" placeholder="First"></div>
<div class="col-sm-3"><label>Last name</label><input type="text" class="form-control" placeholder="Last"></div>
</div>
<div class="form-group">
<label class="col-sm-12">Phone number</label>
<div class="col-sm-1"><input type="text" class="form-control" placeholder="000"><div class="help">area</div></div>
<div class="col-sm-1"><input type="text" class="form-control" placeholder="000"><div class="help">local</div></div>
<div class="col-sm-2"><input type="text" class="form-control" placeholder="1111"><div class="help">number</div></div>
<div class="col-sm-2"><input type="text" class="form-control" placeholder="123"><div class="help">ext</div></div>
</div>
<div class="form-group">
<label class="col-sm-1">Options</label>
<div class="col-sm-2"><input type="text" class="form-control" placeholder="Option 1"></div>
<div class="col-sm-3"><input type="text" class="form-control" placeholder="Option 2"></div>
</div>
<div class="form-group">
<div class="col-sm-6">
<button type="submit" class="btn btn-info pull-right">Submit</button>
</div>
</div>
</form>
<hr>
</div>
To make it work in Chrome (and bootply) i had to change code in this way:
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-xs-2 control-label">Name</label>
<div class="col-xs-10">
<input type="text" class="form-control col-sm-10" name="name" placeholder="name" />
</div>
</div>
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday</label>
<div class="col-xs-10">
<div class="form-inline">
<input type="text" class="form-control" placeholder="year" />
<input type="text" class="form-control" placeholder="month" />
<input type="text" class="form-control" placeholder="day" />
</div>
</div>
</div>
</form>
A much simpler solution, without all the inside form-group elements
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday</label>
<div class="col-xs-10">
<div class="form-inline">
<input type="text" class="form-control" placeholder="year" style="width:70px;"/>
<input type="text" class="form-control" placeholder="month" style="width:80px;"/>
<input type="text" class="form-control" placeholder="day" style="width:100px;"/>
</div>
</div>
</div>
... and it will look like this,
Cheers!
I had problems aligning the label to the input(s) elements so I transferred the label element inside the form-inline and form-group too...and it works..
<div class="form-group">
<div class="col-xs-10">
<div class="form-inline">
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="year"/>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="month"/>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="day"/>
</div>
</div>
</div>
</div>