I have this code snippet, but this renders dropdown after line break, What's the best bootstrap 3 col class to get it correct? (select dropdown next to input medium-inline)
<form class="form-horizontal well" >
<div class="form-group">
<label class="col-lg-2 control-label">Memory</label>
<div class="col-lg-4">
<div>
<input id="memory" type="text" class="form-control">
</div>
<div class="col-lg-4">
<select id="memoryType" class="form-control">
<option value="GB" selected="selected">GB</option>
<option value="MB">MB</option>
</select>
</div>
</div>
</div>
</form>
Ok, this is how I would do it.
First add the form-inline class to your form.
Then remove the col-lg classes from labels and inputs.
Also remove all un-needed divs too, which results in the below html:
Markup
<form class="form-inline well" >
<div class="form-group">
<label class="control-label">Memory</label>
<input id="memory" type="text" class="form-control">
</div>
<div class="form-group">
<select id="memoryType" class="form-control">
<option value="GB" selected="selected">GB</option>
<option value="MB">MB</option>
</select>
</div>
</form>
Screen grab
If you want your form-fields to align horizontally - you can actually use the inline form. eg:
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="memory">Memory</label>
<input id="memory" type="text" class="form-control">
</div>
<div class="form-group">
<select id="memoryType" class="form-control">
<option value="GB" selected="selected">GB</option>
<option value="MB">MB</option>
</select>
</div>
</form>
Note: not tested in an actual browser...
Related
I want to make a form that adheres to design specifics that require me to align some fields to the left side of the viewport, and other fields that align to the right side. Here is what I have so far:
<form class="form-inline">
<div class="form-group">
<h2>Order Entry</h2>
<label for="ipt_authNum">Authorization Number</label>
<input class="form-control" type="text" id="ipt_authNum" />
</div>
<div class="form-group">
<label for="ipt_customer">Customer</label>
<select class="form-control" id="ipt_customer" style="width:30%;">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="form-group">
<label for="ipt_billTo">Bill To</label>
<input class="form-control" type="text" id="ipt_billTo" />
</div>
</form>
As you can see, this block of markup makes a form where the fields are stacked on top of each other. Instead of that, I want the "Customer" and "Bill To" fields (labels included) to be across from each other on the same line (with the labels inline). Note that mobile design considerations are not required for this application; it will be a company intranet type deal where employees are only allowed to access the application via a desktop computer. Any help is greatly appreciated. Also, there are many more fields to add to this form. I just wanted to get an idea before I got too far into it. Thanks.
You can use bootstrap grid system to align labels and fields in the form. Below is the sample form. You can refer here for some examples. The important thing is the row and col-md-* classes applied to the divs for bootstrap grid system to align the form accordingly.
View the below example in full page view to see form layout. Hope this helps.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-inline">
<h2>Order Entry</h2>
<div class="container">
<div class="row">
<div class="col-md-2"><label for="ipt_authNum">Authorization Number</label></div>
<div class="col-md-3"><input class="form-control" type="text" id="ipt_authNum" /></div>
<div class="col-md-7"> </div>
</div>
<div class="row" style="margin-top: 20px;">
<div class="col-md-2">
<label for="ipt_customer">Customer</label>
</div>
<div class="col-md-3">
<select class="form-control" id="ipt_customer" style="width:30%;">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="row">
<div class="col-md-2"><label for="ipt_billTo">Bill To</label></div>
<div class="col-md-4"><input class="form-control" type="text" id="ipt_billTo" /></div>
</div>
</div>
</form>
I think using one <div class="form-group"> will work. Like :
<div class="form-group">
<label for="ipt_customer">Customer</label>
<select class="form-control" id="ipt_customer" style="width:30%;">
<option value="1">1</option>
<option value="2">2</option>
</select>
<label for="ipt_billTo">Bill To</label>
<input class="form-control" type="text" id="ipt_billTo" />
</div>
Maybe add some bootstrap col ?
<div class="form-group">
<div class="col-md-6">
<label for="ipt_customer">Customer</label>
<select class="form-control" id="ipt_customer" style="width:30%;">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="col-md-6">
<label for="ipt_billTo">Bill To</label>
<input class="form-control" type="text" id="ipt_billTo" />
</div>
</div>
.form-inline require costume width on the inputs and only applies to forms within viewports that are at least 768px wide.
https://getbootstrap.com/docs/3.3/css/#forms
You should add col classes to your elements also for better results.
Good day, I'm wondering why my button cannot do a submit inside phone browsers. Please take alook at my form
<form class="form-horizontal" method="POST" action="#" id ='form_id'>
<div class="form-group">
<label class="col-sm-3 control-label">Tipe</label>
<div class="col-sm-5">
<select onchange = 'by_brand();' name = 'tipenya' id="tipe" class="form-control select2">
<option value="">---</option>
<option value="AR-1">Naughty</option>
<option value="AR-6">Les Femmes</option>
<option value="AR-10">Matahari</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Area</label>
<div class="col-sm-5">
<select onchange="brands();" name ='area' id="areanya" class="form-control select2">
<option value="">All</option>
<?php foreach ($area as $areanya) {?>
<option value="<?=$areanya->AreaCode;?>"><?=$areanya->Description;?></option>
<?php } ?>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Outlet</label>
<div class="col-sm-5">
<select name='outlet' id="hsl" class="form-control select2">
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Date</label>
<div class="col-sm-5">
<input type="text" class="form-control pull-right" readonly="readonly" placeholder="Tanggal" name="date_search" id="reservation" />
</div>
</div>
<div class="box-footer pull-right">
<input type="submit" class="btn btn-submit" />
</div>
</form>
It's working fine when i use any laptop. Can anyone help me?
Here is my full html code
http://pastebin.com/KCEQzW3e
First of all try using this to test if the sumbit actually works
<form action="javascript:alert("sumbit button works!");" id='form_id'>
if this doesnt work then there is something wrong with your form.
if this works. there is something wrong with the jquery function you used.
try using this to call a function if you click submit:
<form class="form-horizontal" method="POST" action="#" id ='form_id' onsubmit="myFunction()">
I hope this helps.
I wanted to align input and select in same line , below code works in desktop but in mobile ,select list is coming down to new line even though I used col-sm.
Below is the form code
<form class="form-horizontal">
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">name</label>
<div class="col-sm-5">
<input class="form-control" id="inputPassword3" placeholder="name" type="text">
</div>
<div class="col-sm-5">
<select class="form-control" name="category">
<option>select</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
</form>
And here is bootply http://www.bootply.com/9N0DxgUSMi
How about adding col-xs-5, and for example col-xs-12 to your password label? Should work :)
Is it possible to insert a form with select element inside horizontal form in Bootstrap.
I need to insert a form with select element inside form group.
Bootply code here
Note: Bootply messes the code and remove some form tags, so copy the code below.
The problem the element becomes not aligned. The two selects for Country and Language in the code not aligned and messes the code after them.
The code is here again:
<div class="container-fluid">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-4 control-label" for="fname">First name:</label>
<div class="col-sm-8">
<input class="form-control" name="fname" id="fname" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="lname">Last name:</label>
<div class="col-sm-8">
<input class="form-control" name="lname" id="lname" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="country">Country:</label>
<div class="col-sm-8">
<form>
<select name="country" id="country" class="form-control">
<option value="US">US</option>
<option value="UK">UK</option>
<option value="CA">CA</option>
</select>
</form>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="language">Language:</label>
<div class="col-sm-8">
<form>
<select name="language" id="language" class="form-control">
<option value="en-US">en-US</option>
<option value="en-UK">en-UK</option>
<option value="fr">FR</option>
</select>
</form>
</div>
</div>
</form>
</div>
You have multiple <form></form> values in your code. Since this is only one form all you need is the form class at the beginning and the close at the end. This is why it's becoming misaligned. Check out my fiddle
http://jsfiddle.net/jxe78828/
According to the HTML5 specs, you can't nest one form inside another:
4.10.3 The form element
...
Content model:
Flow content, but with no form element descendants.
Bootstrap is designed with the assumption that you will be using valid HTML structure. So you may want to rethink your HTML structure and if there is another way to accomplish what you are trying to do with nested <form> elements.
Try this:
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-4 control-label" for="fname">First name:</label>
<div class="col-sm-8">
<input class="form-control" name="fname" id="fname" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="lname">Last name:</label>
<div class="col-sm-8">
<input class="form-control" name="lname" id="lname" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="country">Country:</label>
<div class="col-sm-8">
<select name="country" id="country" class="form-control">
<option value="US">US</option>
<option value="UK">UK</option>
<option value="CA">CA</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="language">Language:</label>
<div class="col-sm-8">
<select name="language" id="language" class="form-control">
<option value="en-US">en-US</option>
<option value="en-UK">en-UK</option>
<option value="fr">FR</option>
</select>
</div>
</div>
</form>
</div>
You can also see my JSFiddle here
After a lot of search with people answering without reading the question clearly and misunderstanding what I need. Clearly the question means I need separate forms or sub forms inside forms, this can be possible with HTML 5 attribute form in this way:
<select name="country" id="country" class="form-control" form="country-form">
where you can just put empty form any where like this:
<form id="country-form"></form>
or even this form does not exist, the above form field will not be included anyway when submitting the container form.
I have a forw, in which i need to display two field near each other: select + input. My code is:
<div role="form">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter date" id="maps-filter-input-date">
</div>
<div class="form-group" id="maps-filter-select-track">
<select class="form-control" class="display-inline-block">
<option>Select date</option>
</select>
<input type="text" class="form-control" placeholder="Enter date">
</div>
<div class="form-group" id="maps-filter-select-track">
<select class="form-control">
<option>Select date</option>
</select>
<input type="text" class="form-control" placeholder="Enter date">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</div>
Looks it like this:
With black color is show where it should be. So is it possible to do with default bootstrap classes?
From the Bootstrap doc:
Add .form-inline to your for left-aligned and inline-block controls.
You will also need to set custom width to your form elements, see details here
Change
<div class="form-group" id="maps-filter-select-track">
to
<div class="form-group form-inline" id="maps-filter-select-track">
here's bootply
http://www.bootply.com/e2BS204U7b