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
Related
I have a form with bootstrap:
<form class="form-inline">
<div class="form-group barkodiK">
<input type="text" class="form-control barkodi" placeholder="Barkodi">
</div>
<div class="form-group produktiK">
<datalist id='produktet'></datalist>
<input list="produktet" class="form-control produkti" onkeyup="merrProduktet(this)" placeholder="Produkti">
</div>
<div class="form-group pershkrimiK">
<datalist id='pershkrimiProdukteve'></datalist>
<input list="pershkrimiProdukteve" class="form-control pershkrimi" placeholder="Pershkrimi">
</div>
<div class="form-group cmimiK">
<input type="text" class="form-control cmimi" readonly placeholder="Çmimi">
</div>
</form>
This form gives me this result:
But if i do this change in my editor lines it changes the structure also:
<form class="form-inline">
<div class="form-group barkodiK">
<input type="text" class="form-control barkodi" placeholder="Barkodi">
</div>
<div class="form-group produktiK">
<datalist id='produktet'></datalist>
<input list="produktet" class="form-control produkti" onkeyup="merrProduktet(this)" placeholder="Produkti">
</div><div class="form-group pershkrimiK">
<datalist id='pershkrimiProdukteve'></datalist>
<input list="pershkrimiProdukteve" class="form-control pershkrimi" placeholder="Pershkrimi">
</div>
<div class="form-group cmimiK">
<input type="text" class="form-control cmimi" readonly placeholder="Çmimi">
</div>
</form>
And i have this result:
I dont even know why this thing affects the CSS of HTML. Any help?
Because the form inputs are displayed inline, the extra space you removed in the second file caused the inputs to move closer together:
</div><div class="form-group pershkrimiK">
This is what it should be if you want the space between the boxes:
</div>
<div class="form-group pershkrimiK">
When things are displayed inline, whitespace between/around elements is visible.
I'm using bootstrap to display a form-inline. However, I cannot figure how to remove the spaces between the form inputs, it always leaves a ~4p blank. I tried to adjust it using margin, in vain. Any idea why ?
Here's the form
<div class="container">
<form id="msform" class="form-inline" role="form" method="post">
<!-- progressbar -->
<div class="form-group">
<input type="hidden" id="form_departure" name="form[departure]" required="required" placeholder="Départ" class="form-control"><input type="text" id="autocompleter_form_departure" name="autocompleter_form[departure]" required="required" placeholder="Départ" class="form-control ui-autocomplete-input" autocomplete="off">
</div>
<div class="form-group">
<input type="hidden" id="form_arrival" name="form[arrival]" required="required" placeholder="Arrivée" class="form-control"><input type="text" id="autocompleter_form_arrival" name="autocompleter_form[arrival]" required="required" placeholder="Arrivée" class="form-control ui-autocomplete-input" autocomplete="off">
</div>
<div class="form-group">
<select id="form_passengers" name="form[passengers]" required="required" class="fly_confirm form-control"><option value="1" selected="selected">1 passager</option><option value="2">2 passagers</option><option value="3">3 passagers</option><option value="4">4 passagers</option><option value="5">5 passagers</option></select>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">CHERCHER</button>
</div>
</form>
</div>
Inline elements are sensitive to the white space in your code. The easiest solution is to simply remove it.
Ex: </div><div class="form-group">
bootply example
An alternative is to float the inputs:
.form-group {
float:left;
}
bootply example
I tried to use Bootstrap's inline form but oddly the submit button can't be put on the same line with other input items. I had been searching for solutions but didn't find one yet.
Here is my HTML code:
<form class="form-inline" role="form" method="post" action="">
<div class="form-group">
<input type="text" class="input-small" id="startDate" placeholder="Start Date" name="startDate">
</div>
<div class="form-group">
<input type="text" class="input-small" id="endDate" placeholder="End Date" name="endDate">
</div>
<div class="form-group">
<input type="text" class="input-small"" id="number" placeholder="Number" name="number">
</div>
<div class="form-group">
Status: <select class="selectpicker" id="status" name="status" >
<option value="All">ALL</option>
<option value="Successful">Successful</option>
<option value="Unsuccessful">Unsuccessful</option>
</select>
</div>
<div class="form-group">
Direction: <select class="selectpicker" id="direction" name="direction">
<option value="All">All</option>
<option value="IN">In</option>
<option value="OUT">Out</option>
</select>
</div>
<button type="submit" class="btn btn-success" id="submit" name="submit"/>Submit</button>
</form>
Can somebody help me to inline the submit button with the other items? Thanks a lot!
Put your button inside the <div class="form-group">
<form class="form-inline" role="form" method="post" action="">
<div class="form-group">
<input type="text" class="input-small" id="startDate" placeholder="Start Date" name="startDate">
</div>
<div class="form-group">
<input type="text" class="input-small" id="endDate" placeholder="End Date" name="endDate">
</div>
<div class="form-group">
<input type="text" class="input-small"" id="number" placeholder="Number" name="number">
</div>
<div class="form-group">
Status: <select class="selectpicker" id="status" name="status" >
<option value="All">ALL</option>
<option value="Successful">Successful</option>
<option value="Unsuccessful">Unsuccessful</option>
</select>
</div>
<div class="form-group">
Direction: <select class="selectpicker" id="direction" name="direction">
<option value="All">All</option>
<option value="IN">In</option>
<option value="OUT">Out</option>
</select>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success" id="submit" name="submit"/>Submit</button>
</div>
</form>
I copied your form into a test project and bootstrap properly inlined the submit button. In addition, I made some changes to your html above. I removed the terminator from the "button" element on your submit button and I removed the extra quote on the textbox with an id of "number". Moving the button inside or outside of a form-group made no difference for me.
While testing, and looking at your link, I noticed that bootstrap wrapped your form on the appropriate media width boundary. Make sure that your form is not just wrapping, like it's supposed to. If it's wrapping, reduce the horizontal footprint of your form using collapse.
There is an example in the bootstrap docs here...
http://getbootstrap.com/components/#navbar-default
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...
Can't seem to horizontally align my form elements with bootstrap 3. I tried adding .form-inline but still no results. Heres my form.
<form>
<input type="input" />
<select></select>
<select name="something">
<option value="1">1</option>
</select>
<input type="submit" value="submit" />
</form>
I think you're missing <div class="form-group"> around your form elements and you need to add a form-control class to your fields. From the docs:
<form class="form-inline" role="form">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
...
</form>
http://getbootstrap.com/css/#forms-inline