After trying numerous strategies, I am still struggling to place two buttons next to each other evenly:
<input type="button" value="This week's Schedule" onclick= 'window.location.href = dic[current_sunday]' />
<input type="button" value="Next week's Schedule" onclick= 'window.location.href = dic[next_sunday]' />
The goal is to have one button occupy 50% of the row and the other button take up the remaining 50%, creating this layout:
{---------------------------------------}{--------------------------------------}
I require a solution that is compatible with jquery mobile. While I have come across methods that work for standard formats, none seem to work with jquery mobile and <input type"button"
For instance, the following code snippet:
<style>
.ui-block-a { width: 70% !important; }
.ui-block-b { width: 20% !important; }
</style>
<div class=ui-grid-a>
<input type="button" value="This week's Schedule" onclick= 'window.location.href = dic[current_sunday]' />
<input type="button" value="Next week's Schedule" onclick= 'window.location.href = dic[next_sunday]' />
</div>
does not produce the desired result when using <input type="button", but it works with
<button type="button">eat</button>Even employing data-inline="true" as shown below:
<input type="button" data-inline="true" value="This week's Schedule" onclick= 'window.location.href = dic[current_sunday]' />
<input type="button" data-inline="true" value="Next week's Schedule" onclick= 'window.location.href = dic[next_sunday]' />
positions the buttons side by side, but their sizes are determined by the content.
In summary, I am seeking a solution to position two buttons side by side, each occupying 50% of the screen, within the constraints of jquery mobile and <input type="button"
Many thanks!