How do I align the button to the right of the text box, after using form control on the search box, I am able to align the button to the left of the text box but I wish to have it on the right, please help.
<div class="row">
<div class="col-sm-12">
<div class="col-sm-4 pull-left">
<input type="button" class="btn btn-default" value="New" onclick="go('password_det.asp');" />
</div>
<div class ="form-group pull-right">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
</div>
<div class="pull-right">
<button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</div>
The search box and button
Fix again!
<div class="row">
<div class="col-sm-12">
<div class="col-sm-4 pull-left">
<input type="button" class="btn btn-default" value="New" onclick="go('password_det.asp');" />
</div>
<div class="pull-right">
<button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
<div class ="form-group pull-right">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
</div>
</div>
</div>
Try Input Groups on the form elements, bootstrap by default provides those classes
This is how you make use of them
HTML
<div class="row">
<div class="col-sm-12">
<div class="col-sm-4 pull-left">
<input type="button" class="btn btn-default" value="New" onclick="go('password_det.asp');" />
</div>
<div class="col-sm-6 pull-right">
<div class ="input-group search-bar">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
<span class="input-group-addon">
<button class="btn search-btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</div>
CSS
.search-bar{
padding:0;
}
.search-bar .input-group-addon{
padding:0;
}
.search-bar .search-btn{
padding:5px 12px;
}
Link for reference
hope this helps..
Just change place them:
Change:
<div class ="form-group pull-right">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
</div>
<div class="pull-right">
<button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
To:
<div class="pull-right">
<button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
<div class ="form-group pull-right">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-4 pull-left">
<input type="button" class="btn btn-default" value="New" onclick="go('password_det.asp');" />
</div>
<div class="pull-right">
<button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
<div class ="form-group pull-right">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
</div>
</div>
</div>
Here is an example of inline search form:
<div class="pull-right">
<form method="get" action="">
<div class="form-group form-inline">
<input type="text" placeholder="search" class="form-control" name="s">
<button title="search" name="search" type="submit" class="btn btn-primary">Search</button>
</div>
</form>
</div>
you can use style=float: right; on button tag to align button to right and then adjust margin and padding accordingly.
Related
I have a problem with layout bootstrap. I want the search button to remain at the end of the line.
Here is my code:
<form id="frmTest" class="form-inline">
<div class="form-group">
<input type="text" name="full_name" class="form-control" id="full_name" placeholder="Name"/>
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="start_date" class="form-control" readonly id="start_date" size="8" placeholder="From(Date)">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="end_date" class="form-control" readonly id="end_date" size="8" placeholder="To(Date)">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary black" onClick="clearForm(event);" id="btn-reset" >clear</button>
</div>
</form>
<button class="btn btn-warning " id="btn-search">Search</button> //this not part form input
output:
I want the layout like this:
How can this resolved?
1)Place search button into the form.
2) If you don't want to place the search button into the form, then try the below code.
Just, make the form inline.
form {
display: inline;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<form id="frmTest" class="form-inline">
<div class="form-group">
<input type="text" name="full_name" class="form-control" id="full_name" placeholder="Name" />
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="start_date" class="form-control" readonly id="start_date" size="8" placeholder="From(Date)">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="end_date" class="form-control" readonly id="end_date" size="8" placeholder="To(Date)">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary black" onClick="clearForm(event);" id="btn-reset">clear</button>
</div>
</form>
<button class="btn btn-warning " id="btn-search">Search</button>
Note: View the output in full page mode.
i have two forms. One form for login and the other form for reset the password.
Now i want to set the both buttons (login, password reset) side by side.
But i don't know, how to do that.
And here is my code:
<form action="login" method="POST">
<div class="row">
<div class="col-md-2">Username:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="text" name="username" id="username" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2">Passwort:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="password" name="password" id="password" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2 input-group-sm">
<input type="submit" class="form-control btn-default" value="Login" />
</div>
</div>
</form>
<form action="reset" method="POST">
<div class="row">
<div class="col-md-2 input-group-sm">
<input class="form-control btn-default" type="submit" value="Passwort vergessen" />
</div>
</div>
</form>
I hope you can help me.
Keep the button elements in same form and add form attribute to the other button to which you want to associate with other form element.
From MDN:
The form element that the button is associated with (its form owner). The value of the attribute must be the id attribute of a element in the same document. If this attribute is not specified, the element will be associated to an ancestor element, if one exists. This attribute enables you to associate elements to elements anywhere within a document, not just as descendants of elements.
Example:
<form id="firstForm">
<button>Submit First form</button>
<button form="secondForm">Submit Second form</button>
</form>
<form id="secondForm">
</form>
Give your second form an id (e.g. "form2"), and add this CSS:
#form2 {
position: relative;
bottom: 25px;
left: 55px;
}
i changed css of two buttons, now it works, here you can run, nd see it's working now.
i added style="float:left;" in <input type="submit" class="form-control btn-default" value="Login"/> and <input class="form-control btn-default" type="submit" value="Passwort vergessen"/>
<form action="login" method="POST">
<div class="row">
<div class="col-md-2">Username:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="text" name="username" id="username" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2">Passwort:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="password" name="password" id="password" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2 input-group-sm">
<input type="submit" class="form-control btn-default" value="Login" style="float:left;" />
</div>
</div>
</form>
<form action="reset" method="POST">
<div class="row">
<div class="col-md-2 input-group-sm">
<input class="form-control btn-default" type="submit" value="Passwort vergessen" style="float:left;" />
</div>
</div>
</form>
<style>
#resetForm {
position: relative;
bottom: 37px;
left: 55px;
}
</style>
<form action="login" method="POST">
<div class="row">
<div class="col-md-2">Username:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="text" name="username" id="username" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2">Passwort:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="password" name="password" id="password" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2 input-group-sm">
<input type="submit" class="form-control btn-default" value="Login" />
</div>
</div>
</form>
<form action="reset" method="POST">
<div class="row" id="resetForm">
<div class="col-md-2 input-group-sm">
<input class="form-control btn-default" type="submit" value="Passwort vergessen" />
</div>
</div>
</form>
If you want to put the buttons side by side you can add the css property float: left; to the login button and it'll work, but it'll work only for this example.
<form action="login" method="POST">
<div class="row">
<div class="col-md-2">Username:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="text" name="username" id="username" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2">Passwort:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="password" name="password" id="password" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2 input-group-sm">
<input type="submit" class="form-control btn-default" value="Login" style="float:left; />
</div>
</div>
</form>
<form action="reset" method="POST">
<div class="row">
<div class="col-md-2 input-group-sm">
<input class="form-control btn-default" type="submit" value="Passwort vergessen" />
</div>
</div>
</form>
Important note:
I don't think it's a good idea to use a form only for a button element, you should think of using it in the same form and apply the float: left; property to the buttons, it makes more sense and it's better for your DOM.
Better way to do
You should not use a second form to reset your first form.
You have to use only one form and add an input with type="reset"
By this way you can place your buttons side by side in only one line and reset works !
<div class="col-md-2 input-group-sm">
<input type="submit" class="form-control btn-default" value="Login" />
<input type="reset" value="Reset"/>
</div>
Live demo :
https://jsfiddle.net/20o2ahnr/
Hi i'm having trouble resizing the search button so that it will be the same height as the textfield. Thank you in advance!.
<div class="form-group col-md-4">
<div class="col-md-9">
<label for="search">Search:</label>
<div class="input-group">
<input type="text" class="input-sm form-control" id="search" />
<span class="input-group-addon">
<button type="submit" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
You can use Input Group instead of Input Group Addon and change the button to match the input size of small. See example Snippet.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="form-group col-md-4">
<div class="col-md-9">
<label for="search">Search:</label>
<div class="input-group">
<input type="text" class="input-sm form-control" id="search" /> <span class="input-group-btn">
<button type="submit" class="btn btn-default btn-sm" type="button"><span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
<!-- /input-group -->
I try to make a full width search box. its working in tab and mobile but not working in desktop or laptop
Here is my code
<div class="row">
<div class="col-md-offset-2 col-sm-offset-2 col-xs-offset-1 col-md-8 col-sm-8 col-xs-10">
<form action="" autocomplete="off" class="navbar-form" method="post" accept-charset="utf-8">
<div class="input-group">
<input name="searchtext" value="" class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-default" type="submit" id="addressSearch">
<span class="icon-search"></span>
</button>
</span>
</div>
</form>
</div>
</div>
when I see the responsive view its working on mobile and tab view
But its not working in desktop view
Remove you nav-bar class and add form-horizontal
<form action="" autocomplete="off" class="form-horizontal" method="post" accept-charset="utf-8">
<div class="input-group">
<input name="searchtext" value="" class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-default" type="submit" id="addressSearch">
<span class="icon-search"></span>
</button>
</span>
</div>
</form>
Give col-lg-12 class to the div
<form action="" autocomplete="off" class="navbar-form" method="post" accept-charset="utf-8">
<div class="input-group col-lg-12">
<input name="searchtext" style="width:100%" value="" class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-default" type="submit" id="addressSearch">
<span class="icon-search"></span>
</button>
</span>
</div>
<div class="row">
<div class="col-md-offset-2 col-sm-offset-2 col-xs-offset-1 col-xs-10 col-sm-8 col-md-8 col-lg-6">
<div class="form-group">
<input name="searchtext" value="" class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-default" type="submit" id="addressSearch">
<span class="icon-search"></span>
</button>
</span>
</div>
</div>
</div>
So I have my search box as follows:
<div class="input-group-">
<form id="form_search" name="form_search" method="get" action="<?php echo site_url();?>">
<input type="text" name="s" id="search_top" class="form-control" placeholder="Search For Patches"/>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</form>
</div>
However, is displays like this: http://gyazo.com/7c6d81ea6341d2d4461c74eb4afb76e2
Any help? Thanks.
EDIT:
Using the bootstrap min css.
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css
To make Inline form keep your code like this
<form id="form_search" name="form_search" method="get" action="" class="form-inline">
<div class="form-group">
<div class="input-group">
<input class="form-control" placeholder="Search for..." type="text">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</form>
http://www.bootply.com/p1BgBMMjN9
Updated URL:
http://www.bootply.com/6wVwlnjp0a
For the Attached Search btn
http://www.bootply.com/1jX4AhOZ3o
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div>
This will resolve your issue.
put in inside a div like this.
<div class="input-group">
<input type="text" name="s" id="search_top" class="form-control" placeholder="Search For Patches"/>
<span class="input-group-btn">
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
That should solve the problem.
<div class="input-group">
<input type="text" name="s" id="search_top" class="form-control" placeholder="Search For Patches"/>
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
This is how you can do. You want the Input and the Search on one Line.
Code for this is
<form class="form-inline" role="form">
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="Enter email">
<button type="submit" class="btn btn-xs"><span class="glyphicon glyphicon-search" style="font-size:24px"></span></button>
</div>
</form>
It happens because 'search' properties are:
display:block;
width:100%;
so change that in css of the class 'form-control' like:
.form-control{
display:inline;
width:50px;
}
Does it work now?