I tried adding container and/or row div classes and also tried to add left position for all. How can I align these elements in a row with no css or minimal css changes ?
<div class="container">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
<button class="btn btn-danger" type="button">Stop - X</button>
</span>
<input type="text" class="form-control">
<form method="post" action="/controller/new" class="button_to">
<input value="New" type="submit" />
</form>
</div>
I am expecting to have [Go][Stop][ .... ][Submit] in same row. Link for the demo repl
Try to add this piece of css:
form {
display: inline;
}
<form> - is a block level element, so it breaks lines before and after itself. You have to make it behave as if it is an inline element to overcome the issue.
form {
display: inline;
}
<div class="container">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
<button class="btn btn-danger" type="button">Stop - X</button>
</span>
<input type="text" class="form-control">
<form method="post" action="/controller/new" class="button_to">
<input value="New" type="submit" />
</form>
</div>
Your form is set to display: block; change it to display: inline-block; and it will work like charm.
form{
display: inline-block;
}
<div class="container">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
<button class="btn btn-danger" type="button">Stop - X</button>
</span>
<input type="text" class="form-control">
<form method="post" action="/controller/new" class="button_to">
<input value="New" type="submit" />
</form>
</div>
Add display: inline-block to your form (.button_to):
.button_to {
display: inline-block;
}
You can also remove that styles with position: left because it's unnecessary.
Related
as shown in the image,things are deranged a bit, maybe its because its inside a td.
is it possible to do that?
<td>
<div class="col">
<div class="input-group text-center">
<div class="input-group-btn">
<button class="btn btn-primary" type="submit" id="button-minus"> - </button>
</div>
<input type="text" class="form-control" value="1" size="1">
<div class="input-group-btn">
<button class="btn btn-primary" type="submit" id="button-plus"> + </button>
</div>
</div> <!-- input-group.// -->
</div> <!-- Col.// -->
</td>
You might try to remove the default Bootstrap padding and margin for td, p, button and try :
td {
padding: 0;
margin: 0;
}
You can place the buttons and form on the same line by adding display: inline-flex to .input-group
.input-group {display: inline-flex}
<td>
<div class="col">
<div class="input-group text-center">
<div class="input-group-btn">
<button class="btn btn-primary" type="submit" id="button-minus"> - </button>
</div>
<input type="text" class="form-control" value="1" size="1">
<div class="input-group-btn">
<button class="btn btn-primary" type="submit" id="button-plus"> + </button>
</div>
</div> <!-- input-group.// -->
</div> <!-- Col.// -->
</td>
This is my code:
<input class="btn btn-link" value="reply">
<form action="" id="delete_reply">
<input type="submit" class="btn btn-link" value="delete">
</form>
I would like to align the two inputs. How's that possible ?
Update: Because I should have an output inside the form, I added another input outside of it, because both links should look the same.
I have modified your code a little bit please check it might help you
.form-container{
text-align:center;
}
<div class="form-container">
<form action="" id="delete_reply">
<input class="btn btn-link" value="reply">
<input type="submit" class="btn btn-link" value="delete">
</form>
</div>
You could achieve this wrapping the content inside a div container setting width to it and to your form and using flex-box like this:
<div class="inputs">
<input type="text">
<form action="">
<input type="text">
</form>
</div>
And
.inputs {
width: 100%;
display: flex;
}
.inputs form {
width: 400px;
}
You can just make the form display to be inline.
form{
display:inline;
}
<input class="btn btn-link" value="reply">
<form action="" id="delete_reply">
<input type="submit" class="btn btn-link" value="delete">
</form>
Simply move the 1st input inside the form tag.
<form action="" id="delete_reply">
<input class="btn btn-link" value="reply">
<input type="submit" class="btn btn-link" value="delete">
</form>
Or use display: inline-block
<style>
.btn btn-link {
display: inline-block;
}
</style>
Just put the input tag inside the form
<form action="" id="delete_reply">
<input class="btn btn-link" value="reply">
<input type="submit" class="btn btn-link" value="delete">
</form>
Or if you want to Just keep the html structure as it is and add
form {
display: inline;
}
<input class="btn btn-link" value="reply">
<form action="" id="delete_reply">
<input type="submit" class="btn btn-link" value="delete">
</form>
Add float: left; to both of your inputs.
I have an html form and a div class. Both are represented by buttons and are appearing in different lines. (one below another). I want both the buttons to appear on the same line. How can I achieve this?
<div class="form">
<form method="POST" action="{% url 'mytab' %}">
{% csrf_token %}
<button type="submit" name="drilldown_filter" class="btn btn-primary btn-sm" onclick="myFunction()" disabled><i class="fa fa-arrow-circle-down"></i></button>
<input type="hidden" id="data" name="input name" value="">
</form>
</div>
<div class="button-group">
<button class="btn btn-primary btn-sm" onClick="javascript:history.go(-1);" disabled><i class="fa fa-angle-double-down"></i></button>
</div>
Thanks
use this style for both divs:
<style>
.form{
display: inline-block
}
.button-group{
display: inline-block
}
</style>
This should work.
include Style = "float:left" for form div.
<div class="form" style="float:left;">
<form method="POST" action="">
<button type="submit" name="drilldown_filter" class="btn btn-primary btn-sm" onclick="myFunction()" disabled><i class="fa fa-arrow-circle-down">sdfgsdfg</i></button>
<input type="hidden" id="data" name="input name" value="">
</form>
try this css:
.form,.button-group {
display: inline-block;
}
All you have to do is make div.both that will contain both those divs and put a display: flex on that div.both in the CSS.
<div class="both" >
<div class="form">
<form>
<button>uno</button>
</form>
</div>
<div class="button-group">
<button>dos</button>
</div>
</div>
CSS
div.both {
display: flex;
}
Just copy and paste this code
<div class="form" style="float: left;">
<form method="POST" action="{% url 'mytab' %}">
{% csrf_token %}
<button type="submit" name="drilldown_filter" class="btn btn-primary btn-sm" onclick="myFunction()" disabled><i class="fa fa-arrow-circle-down"></i></button>
<input type="hidden" id="data" name="input name" value="">
</form>
In my angular app I have a typical data entry form with the following three buttons at the end:
<div class="form-group">
<div>
<button id="button1id" name="button1id" class="btn btn-success" ng-click="submitRequest()">Save</button>
</div>
</div>
<br />
<div class="form-group">
<div>
<button id="button2id" name="button2id" class="btn btn-default" >Cancel</button>
</div>
</div>
<br />
<div class="form-group">
<div>
<button id="button3id" name="button3id" class="btn btn-danger">Delete</button>
</div>
</div>
Currently, all 3 buttons are stacked vertically.
What is the CSS syntax to place all 3 of them horizontally?
Removed <br> and the extra <div> tags
HTML:
<div class="form-group">
<button id="button1id" name="button1id" class="btn btn-success" ng-click="submitRequest()">Save</button>
</div>
<div class="form-group">
<button id="button2id" name="button2id" class="btn btn-default" >Cancel</button>
</div>
<div class="form-group">
<button id="button3id" name="button3id" class="btn btn-danger">Delete</button>
</div>
CSS:
.form-group {
display: inline-block;
}
DEMO: JSFIDDLE
To remove whitespace between buttons refer Fighting the Space Between Inline Block Elements
Just Use:
.form-group {
float:left;
}
Working Example
Hope this helps.
Do not surround the buttons with div elements
<div class="form-group">
<button id="button1id" name="button1id" class="btn btn-success" ng-click="submitRequest()">Save</button>
<button id="button2id" name="button2id" class="btn btn-default">Cancel</button>
<button id="button3id" name="button3id" class="btn btn-danger">Delete</button>
I've had the following issue occur with a bootstrap-styled text field and input button many times. Notice that they are not vertically aligned:
How do I align these two elements? Here is the HTML:
<div class="span6">
<input type="text" placeholder="email"> <button type="button" class="btn btn-info">Sign up</button>
</div>
In order to complete that, you must use proper Twitter Bootstrap classes for forms.
In this case, that is .form-inline class.
Here is proper markup:
<form class="form-inline">
<input type="text" class="input-small" placeholder="Email"/>
<button type="submit" class="btn">Sign in</button>
</form>
Here is demo http://jsfiddle.net/YpXvT/42/
<div class="navbar-form pull-left">
<input type="text" class="span2">
<button class="btn">Sign up</button>
</div>
copied from http://twitter.github.io/bootstrap/components.html#navbar
or
<div class="input-append">
<input type="text"/>
<button class="btn">Sign up</button>
</div>
or
<div class="form-horizontal">
<input type="text"/>
<button class="btn">Sign up</button>
</div>
<div class="input-group">
<input type="email" class="form-control" required="required" placeholder="monEmail#domaine.fr">
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fa fa-send"></i></button>
</span>
</div>
change css for class input-group-btn in boostrap-min: vertical-align =>top
it s work for me