Struggling to make these buttons resize dynamically with the page to completely fill the DIV (33% each).
I've tried adjusting the width, but it's not perfect and looks worse as the page gets wider. Setting the width to 33% makes them too narrow.
Is there a more effective approach?
JQuery code for $(window).resize event:
var myWidth = $(window).width() - 1.3*($(window).width() - $('#eventForm').width());
$('.eStatusLabel').css("width", myWidth/3);
Here is the HTML markup :
<div class="ui-block-b" id="statusDiv" >
<fieldset data-role="controlgroup" data-mini="true" data-type="horizontal" >
<input type="radio" name="rdStatus" id="eventStatus1" value="yes" />
<label class="eStatusLabel" for="eventStatus1" >Yes</label>
<input type="radio" name="rdStatus" id="eventStatus2" value="maybe" />
<label class="eStatusLabel" for="eventStatus2" >Tentative</label>
<input type="radio" name="rdStatus" id="eventStatus3" value="no" />
<label class="eStatusLabel" for="eventStatus3" >No</label>
</fieldset>
</div>