Swagata
Swagata

Reputation: 622

Inline form vertical spacing issue

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?

enter image description here

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

Answers (1)

Abhishek Pachal
Abhishek Pachal

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

Related Questions