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.