CODEWITHSUNDEEP
jqueryjquery-mobile
Brian
Brian

Reputation: 4408

How can I set two select menu's in jquery mobile side by side and fill the width of the page

I have two select buttons and I'm trying to put them side by side and take up the width of the screen. I've gotten sorta close either using a grid, or putting them in a control group. With the grid the buttons each take up 50% of the screen but they do not touch. In the control group the select buttons touch but I can't get it to fit the screen. Here are the two implementations. Here is the js fiddle to show what I have so far

 <div data-role="controlgroup"  data-type="horizontal">
        <select name="select_networks" id="select_networks">
            <option value="1/1">Everyone</option>
            <option value="2/1">Friends</option>
        </select>
        <select name="select_sort" id="select_sort">
            <option value="1">Points</option>
            <option value="2">New</option>
        </select>
    </div>

    <div class="ui-grid-a">
        <div class="ui-block-a"> <select name="select_networks" id="select_networks">
                <option value="1/1">Everyone</option>
                <option value="2/1">Friends</option>
            </select></div>
        <div class="ui-block-b">
            <select name="select_sort" id="select_sort">
                <option value="1">Points</option>
                <option value="2">New</option>
            </select></div>
    </div>

Upvotes: 0

Views: 2043

Answers (1)

Phill Pafford
Phill Pafford

Reputation: 85298

Using the navbar you can do this, just make sure it's not wrapped in the content div

HTML

<div data-role="page" id="contest" data-theme="a">

   <div data-role="content">



    </div>

    <div data-role="navbar">
            <ul>
                <li>
                     <select name="select_networks" id="select_networks" data-corners="false">
                        <option value="1/1">Everyone</option>
                        <option value="2/1">Friends</option>
                    </select>
                </li>
                <li>
                     <select name="select_sort" id="select_sort" data-corners="false">
                        <option value="1">Points</option>
                        <option value="2">New</option>
                    </select>
                </li>
            </ul>
        </div>

</div>

​

Upvotes: 2

Related Questions