Jquery Mobile: Horizontal Buttons, fill container

Question

Working on a mobile app, I am trying to create two buttons, that should grow and fill their container.

So in portrait view, the two buttons should use up the entire width of their parent, and in landscape view, they should also grow to fill up their entire parent.

I have tried using a grid, from a suggestion in post I came across, but that does not seem to do the job...

The buttons do not grow and fill their parent.

<div class="ui-grid-a">
 <div class="ui-block-a">
  <a href="tel:xxxx" class="ui-btn ui-icon-phone ui-btn-icon-left ui-btn-inline">xxxx</a>
 </div>
 <div class="ui-block-b">
  <a href="test" class="ui-btn ui-icon-carat-r ui-btn-icon-right ui-btn-inline">More</a>
 </div>
</div>

P.S. A single button, without the grid layout, grew to fill its parent container correctly.

<a href="tel:xxxx" class="ui-btn ui-icon-phone ui-btn-icon-left">xxxx</a>

It seems to be ui-btn-inline that causes it not to grow.

Answer 1

Just remove the ui-btn-inline class.

That class is if you DON'T want the buttons to fill the container. With that class gone, the grid solution will work.

DEMO