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