CODEWITHSUNDEEP
htmljquery-mobile
sphakrrokr Subhrojit
sphakrrokr Subhrojit

Reputation: 37

How to keep side by side search box and submit button?

Testing in IBM Worklight

by data-inline="true" its not working? the position is in up down but I want side by side. 

    <div data-role="header" id="the-page" data-position="fixed">
            <h3>YUMMY</h3>

            <div data-role="navbar" id="navbar" data-iconpos="left">
            <ul>
                <li><a href="#Favs" id="favs" data-icon="star">Favs</a></li>
                <li><a href="#myPanel" id="more" data-icon="bars">More</a></li><!-- PANEL LINK -->
            </ul>
        </div>

            <label for="search" id="label" style="font-weight: bold; font-style: italic; font-family: Comic Sans MS"></label>
            <input type="search" name="search" id="search" data-mini="true" placeholder="Search for Restaurants" data-theme="a" data-inline="true">
<input type="submit" value="Go" data-inline="true" id ="submit" onclick="getRestaurants()">
.....

screenshot link

https://dl.dropboxusercontent.com/u/15844249/stackoverflow/side%20by%20side%20search%20submit.png

Upvotes: 1

Views: 1636

Answers (1)

BradleyIW
BradleyIW

Reputation: 1358

add an id to your submit button and remove data-inline. 

<input type="submit" value="Go" id="submit" onclick="getRestaurants()">

and then add containers around your inputs. 

 <div id ="container">
   <div id ="search_con">
    <input type="search" name="search" id="search" data-mini="true" placeholder="Search for Restaurants" data-theme="a">
   </div>
   <div id="submit_con">
    <input type="submit" value="Go" id ="submit" onclick="getRestaurants()">
   </div>
 </div>

and adjust the width of the container on the screen with the width of the components inside each container. Also float each container left so that they are side by side.

<script>
    #container {width:100%;}
    #submit_con {width:20%; float:left;}
    #search_con {width:80%; float:left;}
    #search {width:100%;}
    #submit {width:100%;}
</script>

Place this inside the <head> tag of your document.

http://jsfiddle.net/6opot4cs/3/

Upvotes: 1

Related Questions