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 -->
Related
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.
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 form, in it user can duplicate input forms, and I have a trouble with a radio buttons.
When I trying to use:
$('form').serialize();
In Chrome Dev Tools
I've got:
"text-field%5B%5D=%D0%98%D0%B2%D0%B0%D0%BD%D0%BE%D0%B2+%D0%98%D0%B2%D0%B0%D0%BD+%D0%98%D0%B2%D0%B0%D0%BD%D0%BE%D0%B2%D0%B8%D1%87&text-h-alignment%5B%5D=42&text-v-alignment%5B%5D=42&text-field%5B%5D=(000)+000+00+00&text-alignment%5B%5D=center& text-h-alignment%5B%5D=42&text-v-alignment%5B%5D=42"
As you can see, radio buttons are not in "array", it's an unique variable.
But I use the "[]" symbols at the end of variable name.
Here is my HTML:
<form>
<div class="row">
<div class="col-lg-4">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Шаблон <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Имя</li>
<li>Телефон</li>
<li>E-mail</li>
<li>Адрес</li>
<li>Сайт</li>
</ul>
</div>
<input type="text" class="form-control" name="text-field[]">
</div>
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" checked="checked" name="text-alignment[]" value="left"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</label>
<label class="btn btn-default">
<input type="radio" name="text-alignment[]" value="center"><span class="glyphicon glyphicon-align-center" aria-hidden="true"></span>
</label>
<label class="btn btn-default">
<input type="radio" name="text-alignment[]" value="right"><span class="glyphicon glyphicon-align-right" aria-hidden="true"></span>
</label>
</div>
<div class="input-group spinner padding-15 pull-left">
<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span></span>
<input type="text" class="form-control" value="42" name="text-h-alignment[]">
<div class="input-group-btn-vertical">
<button class="btn btn-default" type="button"><i class="glyphicon glyphicon-chevron-up"></i></button>
<button class="btn btn-default" type="button"><i class="glyphicon glyphicon-chevron-down"></i></button>
</div>
</div>
<div class="input-group spinner padding-15 pull-left">
<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span></span>
<input type="text" class="form-control" value="42" name="text-v-alignment[]">
<div class="input-group-btn-vertical">
<button class="btn btn-default" type="button"><i class="glyphicon glyphicon-chevron-up"></i>
</button>
<button class="btn btn-default" type="button"><i class="glyphicon glyphicon-chevron-down"></i>
</button>
</div>
</div>
</div>
<div class="row margin-top-15">
<div class="col-lg-4">
<a href="#" class="color-green" onclick="$(this).closest('.container-fluid').find('.row:eq(0)').clone().prependTo($(this).closest('.container-fluid form'))">
<div class="circle green-circle circle-position pull-left"><span class="glyphicon glyphicon glyphicon-plus color-white circle-plus" aria-hidden="true"></span> </div>Добавить еще поля</a>
</div>
</div>
</form>
I did not find a native solution in HTML.
Therefore it was necessary to use such a solution to the JS:
$(this).closest('.container-fluid').find('.row:eq(0)').clone(true).find('input[type=radio]').attr('name', function(i, val){return val.replace(/(\d+)/, function(n){ return ++n })});
As a result, when you click on "duplicate field", appears radio buttons with the names: text-alignment[1], text-alignment[2]...
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?
I have created a popup using bootstrap modal. Here is how it looks like
I want to make the input and input-group elements to be of same width and start at the same position like mentioned in this question. I have tried using form-group as mentioned in its answer but it doesn't work. I am new to bootstrap and JavaScript.
HTML code
<form class="form-horizontal">
<div class="modal fade" id="apstMoleculeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Enter Information</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="control-label col-xs-3">Name</label>
<div class="controls col-xs-9">
<input type="text" placeholder="Enter Name">
<span class="glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">Place</label>
<div class="controls col-xs-9">
<input type="text" placeholder="Enter Place">
<span class="glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">Cost</label>
<div class="controls col-xs-9 input-group">
<span class="input-group-addon">$</span>
<input type="text" placeholder="0.00">
<span class="glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info" ></span>
</div>
</div>
</div> <!-- modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</form>
DEMO: https://jsbin.com/xewevu/1/
Form in wrong location, not using the correct classes on the input and you need to write custom css or use even more wrappers and the grid system, which is really overkill IMO.
The beauty of this approach is that if you decided to use .col-sm instead of xs, then the .help won't stack.
HTML:
<div class="modal fade" id="apstMoleculeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Enter Information</h4>
</div>
<form class="form-horizontal">
<div class="modal-body">
<div class="form-group">
<label class="control-label col-xs-3">Name</label>
<div class="controls col-xs-9">
<span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span>
<input type="text" class="form-control" placeholder="Enter Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">Place</label>
<div class="controls col-xs-9">
<span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span>
<input type="text" class="form-control" placeholder="Enter Place">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">Cost</label>
<div class="controls col-xs-9">
<span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" placeholder="0.00">
</span>
</div>
</div>
</div>
</div>
<!-- modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
CSS
#apstMoleculeModal .form-group {
padding-right:20px;
position:relative;
}
#apstMoleculeModal .help {
position:absolute;
right:-8px;
top:12px;
}
You're not quite using the classes for col-*-* right, and your inputs are also missing classes. Take a look at this Bootply:
Bootply
Here to see what I mean.
Here's the code (Removed all Modals so I could directly edit it)
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-xs-3">Name</label>
<div class="col-xs-2">
<input class="form-control input-sm" placeholder="Enter Name" type="text">
</div>
<div class="col-xs-1">
<span class="glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">Place</label>
<div class="col-xs-2">
<input class="form-control input-sm" placeholder="Enter Place" type="text">
</div>
<div class="col-xs-1">
<span class="glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">Cost</label>
<div class="col-xs-2">
<div class="input-group">
<span class="input-group-addon">$</span>
<input class="form-control input-sm" placeholder="0.00" type="text">
</div>
</div>
<div class="col-xs-1">
<span class="glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span>
</div>
</div>
</form>
Please Note:
You may have to change the size of the col-xs-* to fit in the modal correctly.