<div class=" ui-grid-a " id="drinksTable" ><!--first row-->
<div class="ui-block-a " >
<div class="picsContainer " >
<div data-role="fieldcontain" >
<fieldset data-role="controlgroup" data-mini="false" data-theme="b" style="width: 98%; " data-corners="false">
<legend style="text-align: center ; ">abc</legend>
<input type="radio" name="radio-strength" id="radio-view-a" value="aa" data class="blabla" style="background-color: #BF8F54;"/>
<label for="radio-view-a" >aa</label>
<input class="blabla" type="radio" name="radio-strength" id="radio-view-b" value="bb" checked="checked"/>
<label for="radio-view-b" >bb</label>
<input class="blabla" type="radio" name="radio-strength" id="radio-view-c" value="cc" />
<label for="radio-view-c" >cc</label>
</fieldset>
</div>
</div>
</div>
<div class="ui-block-b ">
<div class="picsContainer" >
<div data-role="fieldcontain" >
<fieldset data-role="controlgroup" data-theme="b" data-mini="false" style="width: 98%" data-corners="false">
<legend >dbv</legend>
<input type="radio" name="radio-temp" id="radio-view-d" value="dd" data />
<label for="radio-view-d">dd</label>
<input type="radio" name="radio-temp" id="radio-view-e" value="ee" checked="checked"/>
<label for="radio-view-e">ee</label>
<input type="radio" name="radio-temp" id="radio-view-f" value="ff" />
<label for="radio-view-f">ff</label>
</fieldset>
</div>
</div>
</div>
for some reason the radio buttons in the picture above have some padding/margin on their left and right (colored red in the picture)
How do I get rid of it? who is the parent container? (I guess that's the reason) Most importantly how do I get them to fit the whole width of the screen (but keep the margin between the buttons)
hope it's clear enough... thank you.
In jQuery Mobile, the default has a 1em padding on the the content div. You can get rid of it by adding the following CSS:
.ui-content{
padding: 0;
}