Reputation: 622
I am trying to create a simple inline form with just a text box and a button next to it. It looks OK in PC but when I open it in a mobile device, the form wraps and the button shows just below the text box without any space between them. Is it possible to bump down the button a bit so that it does not touch the text box above?
This is how I implemented it.
<form class="form-inline" role="form" action="search.asp" method="post">
<input type="text" class="form-control" id="searcharea" name="searcharea" placeholder="Enter city or state or postal code" size="30">
<input type="submit" class="btn greenbtn" value="Search Now">
</form>
Upvotes: 2
Views: 49
Reputation: 554
<form class="form-inline" role="form" action="search.asp" method="post">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter city or state or postal code" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">Search Now</span>
</div>
</form>
And add some javascript/jquery submit function to the #basic-addon2 span so that it can be used to submit form
Upvotes: 1