Reputation: 21
I have created a Textbox and a submit button with the help of input-group
in Bootstrap:
<div class="form-group">
<div class="input-group input-group-lg col-lg-6 col-centered">
<input type="text" class="form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-default">
Search
</button>
</span>
</div>
</div>
I want to add an icon for geolocation in the textbox which is clickable, I tried to do many things like adding another span with input-group-addon
but that's creating a button kind of thing. I want the icon to be inside the textbox and make it clickable. Can anybody suggest a way to do it?
Upvotes: 2
Views: 12484
Reputation: 10930
<div class="row">
<div class="col-sm-2 col-md-2 col-lg-2"></div>
<form ng-submit="search(searchterm)">
<div class="form-group">
<div class="input-group input-group-lg col-sm-8 col-md-8 col-lg-8 col-centered">
<input type="text" class="form-control" ng-model="searchterm">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</form>
<div class="col-sm-2 col-md-2 col-lg-2"></div>
</div> <!-- end row -->
My client wanted a search box with a clickable search glyphicon on the right, and the search box centered in the window, the search box bigger than normal (input-group-lg
), with responsive views. I was a miserable wretch until I saw AngularJR's answer. :-)
Upvotes: 1
Reputation: 2762
Anirudh, Hi there, You could probably try something like this without all the extra css.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="form-group">
<div class="input-group input-group-lg col-lg-6 col-centered">
<a href="#" onclick="alert('clicked');" ></a>
<div class="input-group-addon glyphicon glyphicon-map-marker btn"></div>
<input type="text" class="form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-default">
Search
</button>
</span>
</div>
</div>
Upvotes: 1
Reputation: 11
.input-group abbr{
font-size: 23px;
position: absolute;
right: 16%;
top: 6px;
z-index: 500;
}
<div class="form-group">
<div class="input-group input-group-lg col-lg-6 col-centered">
<input type="text" class="form-control">enter code here
<abbr><a href="#"><i class="fa fa-map-marker"></i></a></abbr>
<span class="input-group-btn">
<button type="button" class="btn btn-default">
Search
</button>
</span>
</div>
</div>
Upvotes: 0
Reputation: 29683
Add an anchor
set it a class of glyphicon
and then make its position:absolute
like one below:
<div class="input-group input-group-lg col-lg-6 col-centered">
<a href="#" onclick="alert('clicked');" class="glyphicon glyphicon-map-marker"></a>
<input type="text" class="form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-default">
Search
</button>
</span>
</div>
CSS
.glyphicon-map-marker{
position:absolute;
z-index:1000;
top:30%;
left:2%;
}
a.glyphicon-map-marker
{
text-decoration: none !important;
}
Upvotes: 5