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>
Related
I implemented a button to display an input field after the button has been clicked, I checked that it worked but as I was doing some final debugging, the button doesn't work again. The strange thing is that, the same piece of code works for a different button. Would you please have a look how I can fix the bug? Thanks a lot!
Here is the code for buttons and input field. The button "Change Password" works, the "Reject" button does not.
<div>
#if($user->user_status=="pending")
<a style="float:right" class="btn btn-primary text-right" href="/users/approve_user/{{$user->id}}">Approve</a>
<a style="float:right" class="btn btn-primary text-right" onclick="rejectClick()">Reject</a>
#else
<a style="float:right" class="btn btn-primary text-right" href="/users/delete_user/{{$user->id}}">Delete</a>
<a style="float:right" class="btn btn-primary text-right" onclick="passwordClick()">Change Password</a>
#endif
</div>
<div class="form-group">
<form action="/users/reject_uesr/{{$user->id}}" method="post">
<label for="textInput" class="hide" id="textTitle">Reject Reason: </label>
<input class="form-control hide" name="reject_reason" value="" type="text" id="textInput" placeholder="Please write down the reason to reject this user:" />
<input class="btn btn-primary hide" type="submit" id="textSubmit" value="Submit">
{{csrf_field()}}
</form>
</div>
<div class="form-group">
<form action="/users/change_password/{{$user->id}}" method="get">
<label for="textInput" class="hide" id="password">New Password </label>
<input class="form-control hide" name="password" value="" type="text" id="passwordInput" placeholder="Please Enter The New Password:" />
<input class="btn btn-primary hide" type="submit" id="passwordSubmit" value="Submit">
{{csrf_field()}}
</form>
</div>
<style>
.hide{
display: none;
}
.show{
display: block;
}
</style>
Here is the code for script:
<script>
function rejectClick(){
document.getElementById('textTitle').className="show";
document.getElementById('textInput').className="show";
document.getElementById('textSubmit').className="btn btn-primary show";
}
function passwordClick(){
document.getElementById('password').className="show";
document.getElementById('passwordInput').className="show";
document.getElementById('passwordSubmit').className="btn btn-primary show";
}
</script>
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 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.
I have the following submit button that does not take me to search.php. Please guide me what is wrong with it.
<div class="row" style="margin-top:80px;">
<form class="form-signin" id="Form1" action="search.php" method="post">
<div class=" col-xs-12" style="float:left;display:inline;">
<div class="ui-widget">
<label for="city">City: </label>
<input id="city">
</div>
<button type="button" class="btn btn-default" type="submit">Search</button>
</div>
</form>
</div>
<button type="button" .... type="submit">Search</button>
You have defined type twice. Remove the one you don't want.
Iam new to bootstrap and I am trying to add an action="doform.php" to a form but I cant get it to work, where in this code should I add action?
<form class="form-inline">
<div class="form-group">
<button type="submit" class="btn btn-default">Send invitation</button>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Send invitation</button>
</div>
I have tried the following but it doesnt do anything...
<form class="form-inline">
<div class="form-group">
<form id="back" action="doit1.php" method="post">
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
</div>
<div class="form-group">
<form id="back" action="doit1.php" method="post">
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
</div>
</form>
Inside the form tag.
And don't forget the method. I assume you'll want to use POST
<form action="doAction.php" method="POST">
Oh, and you only need one submit button.