How to get search button inside input field in mdbootstrap ? - html

Question

Hi I trying to do the following for getting the search button inside the input field with class input-ol, but its not working. I am writing the following code.
<form id="search_form" onsubmit="return false;">
<div class="input-group">
<input type="text" class="input-ol" name="query" placeholder="Ex: cars, watches, exercise... "/>
<span class="input-group-btn" onclick="return searchcontent()">
<button class="btn btn-outline-primary" type="button" aria-label="Search">
<i class="fa fa-search fa-2x" aria-hidden="true"></i>
</button>
</span>
</div>
</form>
The output looks like this

Answer 1

I think you need to add the class form-control to your input element to get it to work.
.input-group input.input-ol {
border-radius: 50px;
}
button.rounded {
border-radius: 10px 50px 50px 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-lg-6">
<form id="search_form" onsubmit="return false;">
<div class="input-group">
<input type="text" class="input-ol form-control" name="query" placeholder="Ex: cars, watches, exercise... " />
<span class="input-group-btn" onclick="return searchcontent()">
<button class="btn btn-outline-primary btn-primary rounded" type="button" aria-label="Search">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</span>
</div>
</form>
</div>
</div>
I also removed the class fa-2x from the icon element just to make the snippet work, but if you have additional styles that make the larger button work with your input field you probably won't have to remove that class.