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
Related
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 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
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...
I am trying to make 3 form boxes to be inline with each other but have a width of 100% (but be able to specify the width of each section, or even better, have the last two form sections be their automatic/standard size and make the first section fill the rest of the space).
Currently I have:
<div class="row">
<form class="form-inline" role="form" name="input" action="LINK_HERE" method="post">
<div class="form-group">
<label class="sr-only" for="lg_query">Label</label>
<input type="text" class="form-control" name="query" id="lg_query" placeholder="Placeholder" autofocus="autofocus" value="VALUE" required />
</div>
<div class="form-group">
<label class="sr-only" for="SOMEID">text</label>
<select class="form-control">
<option value="1">se</option>
<option value="3" selected>ros</option>
<option value="14">rds</option>
<option value="4">sbh</option>
<option value="7">sc</option>
<option value="8">rcs</option>
<option value="9">rns</option>
<option value="10">rws</option>
<option value="12">rps</option>
</select>
</div>
<button type="submit" class="btn btn-default" name="module1"><span class="glyphicon glyphicon-pencil"></span> Edit</button>
</form>
</div><!-- /.row -->
http://jsfiddle.net/isherwood/zSb22/
Thanks so much in advance!
The usual approach is to simply use Bootstrap's grid:
http://jsfiddle.net/isherwood/zSb22/3
<div class="col-xs-4">
Here's an example with better block layout and width variations:
http://jsfiddle.net/isherwood/zSb22/4
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