Jquery mobile search box with button in fieldset full width

Question

I have searched a lot for placing a search button on the right side of an search field. It was very dificult to find some good solution without so many hacks.

The only one good solution I have seen is in one fieldset with 2 columns:

http://jsfiddle.net/nXHNg/1/

<fieldset class="ui-grid-a">
    <div class="ui-block-a"><input type="search" id="searchField" data-inline="true" placeholder="Search"></div>
    <div class="ui-block-b"><input id="btnUpdateWhat" type="button" data-inline="true" value="OK" data-mini="true"></div>       
</fieldset>

The problem here is the not full width of the filedset. At this moment it is not full width to 100% like the element below in the listview. Is it possible to handle this issue elegant without hacks to work on all browsers? I mean when I open it with Ipad, then it should fill the whole width of the screen to 100%.

If you have other suggestions to place a button on the right side of a search field, then place it please.

Answer 1

There is a solution for you.

Take a look at this JQM plugin.

I prefer direct css change, unfortunately that is not a valid option in complex JQM mobile app.