Full width horizontal buttons with jquery mobile?

Question

In Jquery mobile, I can have grouped horizontal buttons, but they the group does not take 100% width.

I tried adding a class that sets width:100% but that did not work.

How can I do it?

Thank you!

Update + Possible Fix: It seems that it was failing because I was explicitly using width="50%" in both buttons. I did 45% and the fit. Probably some margins that the buttons have?

Source code with the fix applied: http://pastebin.com/ZXDNfAU1

Answer 1

<div class="ui-grid-a">
    <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
    <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
</div>

Above will do it if it's not in a footer or header element. Two column grids are here: http://view.jquerymobile.com/master/demos/grids-buttons/

I do not know how to accomplish it within the footer

Answer 2

<div data-role="controlgroup" data-type="horizontal">
  <a href="index.html" data-role="button">Yes</a>
  <a href="index.html" data-role="button">No</a>
</div>

I got code above from the documentation: http://jquerymobile.com/demos/1.0b1pre/#/demos/1.0b1pre/docs/buttons/buttons-grouped.html

I tried it myself and it works perfectly. You get 2 buttons side by side that expand to fill 100% of the screen.