I'm trying to get a select, an input, and a button to align inside an inline form that's within a popover, but as of yet I've had no success. I've followed the docs and tried to experiment with different widths for the select, but to no avail
Edit: Updated to reflect Eric B's suggestion
Code:
<li><a data-placement="bottom" data-toggle="popover" data-container="body" type="button" href="#" id="login" >Login</a></li>
<div id="popover-head" class="hide">Login</div>
<div id="popover-content" class="hide">
<form class="form-inline" role="form">
<div class="form-group">
<select class="form-control">
<option>NA</option>
<option>RU</option>
<option>EU</option>
<option>SEA</option>
</select>
<input type="text" placeholder="Name" class="form-control" maxlength="5">
<button type="submit" class="btn btn-primary">Go To Login »</button>
</div>
</form>
</div>
Output:
Example http://puu.sh/4XWmi.png
I think you're seeing 2 problems..
First, in Bootstrap 3, the form inputs are no longer set to a specific width, so you need to set a width for the inputs to prevent stacking. This can be done by overriding .form-control or set the width by using a style= attribute on your inputs.
Secondly, the Bootstrap .popover has a max-width of 276px, so you need to increase the width accordingly...
.form-control {width:120px;}
.popover {max-width:400px;}
Working demo: http://bootply.com/89823
Try NOT wrapping each one in their own <div> tag. But wrapping all 3 in one <div> tag.
<li><a data-placement="bottom" data-toggle="popover" data-container="body" type="button" href="#" id="login" >Login</a></li>
<div id="popover-head" class="hide">Login</div>
<div id="popover-content" class="hide">
<form class="form-inline" role="form">
<div class="form-group">
<select class="form-control" width="20%">
<option>NA</option>
<option>RU</option>
<option>EU</option>
<option>SEA</option>
</select>
<input type="text" placeholder="Name" class="form-control" maxlength="5" width="20%">
<button type="submit" class="btn btn-primary" width="20%">Go »</button>
</div>
</form>
</div>
Related
how to create a navbar same as stack overflow navbar with search form icon.
i use it but cant find a way.
<div class="form-group">
<input type="text" name="search" class="form-control" placeholder="Search here..">
</div>
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
</form>```
You use DIV's to contain each group of code and arrange them using CSS. I changed the div class form-group to contain the entire form in one container. And you can use the class topnav to contain the images or text you want next to the search bar. Just a little CSS and your on your way!
<div class="topnav">
<a>Stack Overflow</a>
<div class="form-group">
<form>
<input type="text" name="search" class="form-control" placeholder="Search here..">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
There must be a way to display one form next to another in Bootstrap without having to manually set the CSS to display:inline-block.
I've created a fiddle here.
I've used the form-inline class but that doesnt seem to make much of a difference. Am I missing something?
Here is solution:
Add a class,"pull-left" with form-inline.
Hope this will help.
You could put two forms side by side using the grid system. For example:
<div class="container">
<div class="col-xs-6">
<form class='form-inline'>
<div class="input-group">
<input type="date"class="form-control">
<span class="input-group-btn">
<button type='submit' class="btn btn-secondary" type="button">View</button>
</span>
</div>
</form>
</div>
<div class="col-xs-6">
<form class='form-inline'>
<div class="input-group">
<input type="date"class="form-control">
<span class="input-group-btn">
<button type='submit' class="btn btn-secondary" type="button">View</button>
</span>
</div>
</form>
</div>
See a working example here on JS Fiddle
You should use input-group class, as shown here:innput-group
By applying col class in forms you will get the proper result.
<div class='container'>
<div class='row m-b-20 title'>
<div class='col-sm-6'>
<h1>Test page</h1>
</div>
<div class='col-sm-6 text-right'>
<form action='/error-logs' method='POST' class='input-group pull-left'>
<button type='' name='' class='btn btn-default' alt='' title=''><span class='fa fa-floppy-o'></span>Button 1</button>
</form>
<form action='/error-logs' method='POST' class='input-group pull-right'>
<div class="input-group">
<input type="date" name='fromdate' class="form-control">
<span class="input-group-btn">
<button type='submit' class="btn btn-secondary" type="button">View</button>
</span>
</div>
</form>
</div>
</div>
</div>
i-ve stumbled on this searching for an aswer for similar problem
i-ve solved it by doing this
<form action="cosprocess.php" method="post" style="float: left; padding: 1px;">
Bootstrap 3 was likely used when this question was originally asked. Sangrai's answer of using pull-left may have worked well in 3, but unfortunately it does not in Bootstrap 4 when there are too many form controls to fit onto a single line. The controls don't align well.
The following has worked well for me in Bootstrap 4. It may be risky, though, since the Bootstrap documentation says nothing about having an inline form within an inline form.
<div class="form-inline">
<form class="form-inline">
<!-- First set of form controls go here. -->
</form>
<form class="form-inline">
<!-- Second set of form controls go here. -->
</form>
</div>
FYI - The Bootstrap 4.6 documentation says that pull-left was removed because it was redundant to float-left.
Make the parent div come under a row and have 12 col length for all vw.
Use buttons after input field and put all of them in a single form with class in-line.
fiddle
`
<div class="input-group">
<input type="date" name='fromdate' class="form-control">
<span class="input-group-btn">
<button type='submit' class="btn btn-secondary" type="button">View</button>
<button type='' name='' class='btn btn-default' alt='' title=''><span class='fa fa-floppy-o'></span>Button 1</button>
</span>
</div>
</form>`
I am using Bootstrap 3 and I stuck on some form formatting.
E.g. I want to have 3 inline forms (each with label, text input and button) so they elements (label, text input, button) will be all perfectly matching (in column?)
If you look at this fiddle example you can see, that I almost achieved this by setting col-xs-6 to each form-group. But this makes too big space between input and submit button and also break too soon when resizing (and also when I try to align whole form set to left, everything is broken).
So is there any way to align this form elements instead of this?
<form class="form-inline">
<div class="form-group col-xs-6 text-right">
<label for="exampleInputName2">Results per page</label>
<input type="text" class="form-control" id="exampleInputName2" >
</div>
<div class="form-group col-xs-6">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
<form class="form-inline">
<div class="form-group col-xs-6 text-right">
<label for="exampleInputName2">Keyword weight</label>
<input type="text" class="form-control" id="exampleInputName2" >
</div>
<div class="form-group col-xs-6">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
<form class="form-inline">
<div class="form-group col-xs-6 text-right">
<label for="exampleInputName2">Results per page</label>
<input type="text" class="form-control" id="exampleInputName2" >
</div>
<div class="form-group col-xs-6">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
This fiddle might help you. The entire layout can be put into container and each form can be given a margin and text-align css properties.
And I dont think there is a need for text-right and col-xs-6 to be included, instead you can use container to restrict the max-width and make it more responsive as shown in the fiddle.
Why not just give a width to your label? If you put the three elements into the same column then you can just make the label inline-block and give it a width (you may need to use the full page link in the snippet below to see this working)
.form-group > label {
display: inline-block;
vertical-align: middle;
width: 9em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Results per page</label>
<input type="text" class="form-control" id="exampleInputName2">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Keyword weight</label>
<input type="text" class="form-control" id="exampleInputName2">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Results per page</label>
<input type="text" class="form-control" id="exampleInputName2">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
I have been struggling because I have this form that has different inputs on sub divs. Whenever I put the opening form tag before the first input, the line breaks. If I put it after it, it will stay fine. I have tried adding:
display:inline
to different classes, but it doesn't seem to do the trick.
Here is the fiddle: https://jsfiddle.net/tL50dhcu/
Can anyone help me keep it in line?
.form-horizontal {
display: flex;
flex-flow: row nowrap;
}
if you make the container of the form flex , and set it to nowrap
EDIT: Here is a more succinct way to do what you are trying to do: http://codepen.io/dcain19/pen/xVVyao
Try the example below. Notice how the search input was put inside the input-group-btn class. Now, you will have to change your border-radius on the button to make the right borders rounded, but that should get you what you need.
<form method="post" class="form-horizontal" role="form" action="{% url 'search' %}">
<div class="input-group-btn">
<div class="btn-group" role="group">
<input type="text" class="form-control" id="searchInput" placeholder="Search" name="search" required />
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<div class="form-group">
<label for="filter">Industry</label>
<select class="form-control" id="searchIndustry" name="industry">
<option value="any">Any</option>
</select>
</div>
<div class="form-group">
<label for="filter">Country</label>
<select class="form-control" id="searchCountry" name="country">
<option value="any">Any</option>
</select>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary" type="submit"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</form>
I have this html:
<button type="submit" class="btn btn-default pull-right" id="loginBtn" >Login</button>
The addition of pull-right makes button cut off from bottom:
How can I fix this?
Make sure it's inside a Bootstrap form-group..
<form class="form col-md-12 center-block">
<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" placeholder="Password">
</div>
<div class="form-group">
<button class="btn btn-primary btn-lg pull-right">Login</button>
</div>
</form>
Demo: http://bootply.com/106344
Bootstrap 3 button class "btn" adds display: inline-block, which "Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box" (http://www.w3schools.com/cssref/pr_class_display.asp). A way around this would be to try the class "clearfix" around the parent (as was explained above). You could also try wrapping the button in a div:
<div class="pull-right"><button></button></div>