Multiple buttons and search placement in header for jQuery Mobile?
===

I am trying to mimic the attached photo in jQuery Mobile, but it is turning out to be really frustrating:

![enter image description here][1]

Here is the code I am trying:

    <div data-role="header" class="header">
    	<input type="search" name="search" id="search-header" value="" data-mini="true" data-inline="true" data-theme="c" />
    	<a href="#menu_page" data-role="button" data-icon="search" data-iconpos="notext">Search</a>
    	<a href="#menu_page" data-role="button" data-icon="grid" data-iconpos="notext" data-rel="dialog">View</a>
    	<a href="#menu_page" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-rel="dialog">Menu</a>
    </div>

With a CSS of this:

    .page .header .ui-input-search
    {
        margin-right: 90px;
    }

I am ok with using the default icons that come with JQM, but the placement ends up looking like this though:

![enter image description here][2]

I even tried putting a controlgroup around the buttons only and also around the buttons and input box, but put the buttons below the search box.

How would I achieve this in JQM?


  [1]: http://i.stack.imgur.com/XkBd3.png
  [2]: http://i.stack.imgur.com/IGOfG.png