i need help in getting my seach button near my text box it seems to come below the text box
program:
<div class="search-full text-right">
<a class="pull-right search-close"><i class=" fa fa-times-circle"></i></a>
<div class="searchInputBox pull-right">
<input type="search"
data-searchurl="search?="
name="q"
placeholder="start typing and hit enter to search"
class="search-input">
<button class="btn-nobg search-btn" type="submit">
<i class="fa fa-search"> </i>
</button>
</div>
</div>
As per Bootstrap standard, using an input-group is the best bet.
See: http://getbootstrap.com/components/#input-groups-buttons
Bootply Example using some of your code
HTML:
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="search"
data-searchurl="search?="
name="q"
placeholder="start typing and hit enter to search"
class="search-input form-control">
<span class="input-group-btn">
<button class="btn search-btn" type="submit">
<i class="glyphicon glyphicon-search"> </i>
</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div>
EDIT: I've also created a Bootply fork with the 'clear' button for you, though it's slightly hacked. See Bootply
Related
I'm trying to align two buttons to ad input field but I end up messing everything every single time.
I've already aligned an input field to a single button, but I'm not able to add a second button.
This is the html (I'm using some angularjs):
<div class="row">
<div class="col-lg-12">
<form class="form" ng-submit="vm.reCreateTree(ricercaSecondario)" ng-init="aggiornaRicercaPratica()">
<div class="input-group">
<input type="text" ng-model="vm.cercaSecondario" class="form-control" placeholder="{{getTestoPlaceholderRicerca(ricercaPraticaSecondario)}}" required="required" ng-disabled="disabilitaRicercaSecondaria()">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
<button class="btn btn-default" type="submit"
tooltip="Espandi filtri di ricerca" tooltip-placement="bottom"
ng-click="toggleRicerca()" ng-show='user.ambitoSelezionato.nome == "Clienti-Polizze"'>
<i ng-class="{'fa fa-caret-up': showEspandiRicerca, 'fa fa-caret-down': !showEspandiRicerca}"></i>
</button>
</div>
</div>
</form>
</div>
</div>
This is a screenshot of the result:
As you can see the two button are not in the same line as the input field and they are also uneven (speaking about dimensions)...
Any help?!
UPDATE: updated the code (thanks to Mukesh Ram) but the buttons still have two different sizes..
You can have multiple buttons inside a single .input-group-btn. Like this:
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with multiple buttons">
<div class="input-group-btn"> <!-- add button in this div -->
<button type="button" class="btn btn-default" aria-label="Help">
<span class="glyphicon glyphicon-question-sign"></span>
</button>
<button type="button" class="btn btn-default">Action</button>
</div>
</div>
</div>
One other way :
form-inline and form-group
Bootply : http://www.bootply.com/uHEpGIOLwY
<div class="row">
<div class="col-lg-12">
<form class="form-inline" ng-submit="vm.reCreateTree(ricercaSecondario)" ng-init="aggiornaRicercaPratica()">
<div class="form-group">
<input type="text" ng-model="vm.cercaSecondario" class="form-control" placeholder="{{getTestoPlaceholderRicerca(ricercaPraticaSecondario)}}" required="required" ng-disabled="disabilitaRicercaSecondaria()">
<button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
<button class="btn btn-default" type="submit" tooltip="Espandi filtri di ricerca" tooltip-placement="bottom" ng-click="toggleRicerca()" ng-show='user.ambitoSelezionato.nome == "Clienti-Polizze"'>
<i ng-class="{'fa fa-caret-up': showEspandiRicerca, 'fa fa-caret-down': !showEspandiRicerca}"></i>
</button>
</div>
</form>
</div>
</div>
https://jsfiddle.net/5nj5nmqz/3/
<h1 class="page-header row">
Header
<div class="col-md-4">
<a href="#" class="btn btn-default">
Export spreadsheet
<i class="fa fa-download"></i>
</a>
</div>
<div class="col-md-4 form-group has-feedback">
<input type="text" class="form-control search pull-right" placeholder="Search by check name...">
<span class="glyphicon glyphicon-search"></span>
</div>
</h1>
Having a bit of trouble getting the elements within the header to align correctly, as well as getting a bootstrap glyphicon icon to line up inside the input field.
Any ideas on how this could be done correctly? I tried wrapping in rows and moving the columns, but it seems to be off every time.
Try this.
<h1 class="page-header">Header</h1>
<div class="row">
<div class="col-md-4">
<a href="#" class="btn btn-default pull-right export">
Export spreadsheet
<i class="fa fa-download"></i>
</a>
</div>
<div class="col-md-4 form-group has-feedback pull-right">
<div class="form-group has-feedback">
<input type="text" class="form-control search pull-right" placeholder="Username" />
<i class="glyphicon glyphicon-search form-control-feedback"></i>
</div>
</div>
</div>
Few things to note:
<h1 class="page-header row"> is wrong. When using the bootstrap cols, you should create a row by simply saying <div class="row">.
Bootstrap can have 12 columns per row I think. If you are designing the row-column way, the correct way is to create a <div class="row"> and it's children should be <div class="col-**-n"> where the n's of all children add up to 12.
Thank you for taking a look at my question!
What I'm trying to do in bootstrap is add a textarea that have text-editor buttons in them.. "bold", "italic" and "attachment" it's supposed to look like this:
Mockup
But instead I have this:
My Results so far
The main problems I'm having is:
Hot to Prevent text in textarea from going under the editor buttons
What do I need to override in buttons to get the desired effects
By the way I'm using a bootstrap template/theme its called remark, I'm using one of their editor element:
getbootstrapadmin.com/remark/base/forms/editor-markdown.html
template/11989202
HTML I have so far:
<div>
<div class="md-header btn-toolbar btn-toolbar-btm">
<div class="btn-group">
<button class="btn-default btn-sm btn btn-pure" type="button" title="Bold" tabindex="-1" data-provider="bootstrap-markdown"
data-handler="bootstrap-markdown-cmdBold" data-hotkey="Ctrl+B"><span class="fa fa-bold">
</span> </button>
<button class="btn-default btn-sm btn btn-pure" type="button" title="Italic"
tabindex="-1" data-provider="bootstrap-markdown" data-handler="bootstrap-markdown-cmdItalic"
data-hotkey="Ctrl+I"><span class="fa fa-italic"></span> </button>
<button class="btn-default btn-sm btn btn-pure" type="button" title="Heading" tabindex="-1">
<span class="icon wb-attach-file"></span> </button>
</div>
</div>
<textarea class="form-control" rows="8" placeholder="Type something here..."></textarea>
</div>
CSS:
.btn-toolbar-btm{
position:absolute;
top:212px;
margin-left:8px;
z-index:3;
}
If you can help me in any way I will GREATLY appreciate it, you would literally save my job :/
try this code
<div class="form-group required-field-block">
<div class="col-md-12 input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-pencil"></span></span>
<textarea rows="3" size="30" value="" class="form-control" placeholder="Sporočilo"></textarea>
<div class="required-icon">
<div class="text">*</div>
</div>
</div>
</div>
I'm trying to move the class "top" (my search bar/button) half way down the page but am having no luck using bottom or anything else. Currently it's just stuck at the top. I would also like to make the search box bigger but am not sure how to.
<div class="row top">
<div class="col-md-2">
</div>
<div class="col-md-8">
<div class="input-group">
<input type="text" class="form-control" placeholder="Type a hero">
<span class="input-group-btn">
<button class="btn btn-primary">
<span class="glyphicon glyphicon-search">
</span> Search
</button>
</span>
</div>
</div>
<div class="col-md-2">
</div>
</div>
Also I'm sure there's a better way to center my search box instead of adding columns either side to appease the grid system but I have no idea, any tips?
Here's what it currently looks like:
Try adding your own class to the div
CSS
.top-buffer { margin-top: 30px;}
HTML
<div class="row top top-buffer">
<div class="col-md-8 col-md-offset-2">
<div class="input-group">
<input type="text" class="form-control" placeholder="Type a hero">
<span class="input-group-btn">
<button class="btn btn-primary">
<span class="glyphicon glyphicon-search">
</span> Search
</button>
</span>
</div>
</div>
</div>
I used an input group straight from the bootstrap documentation, and for some reason the button is way bigger than the text input.
Here's the HTML:
<div class="jumbotron">
<div class="input-group">
<input ng-model="businessName" ng-model="chosenPlace" googleplace type="text" class="form-control input-lg">
<span class="input-group-btn">
<button ng-click="findGPlace2()" class="btn btn-default" type="button">Find!</button>
</span>
</div>
</div>
I haven't made any changes to the css, just vanilla bootstrap.
Try to use the samples in Boostrap page. This is the bootply link you can customize it.
<div class="jumbotron">
<form class="form-horizontal" role="form">
<div class="input-group">
<input ng-model="businessName" ng-model="chosenPlace" class="form-control input-lg">
<span class="input-group-btn">
<button ng-click="findGPlace2()" class="btn btn-default btn-lg" type="button">Find!</button>
</span>
</div>
</form>
</div>