Radio button group with button at the right end - jquery-mobile

Question

I am new to jquery, I stuck with one problem
Possible Duplicate
jQuery Mobile buttons on same row as controlgroup
But the provided solution does not worked for me.
I am trying to make a radio control group using jqm with a button on right side. I am creating the radio buttons . like this:-
<fieldset data-role="controlgroup" id="privacylistdata"
data-theme="c" class="ui-grid-a">
<label for="Setting1">Setting1</label> <input class="privacytype"
type="radio" name="privacy" id="Setting1"
value="Setting1">
<label for="Setting2">Setting2</label> <input
class="privacytype" type="radio" name="privacy"
id="Setting2" value="Setting2">
<label for="Setting3">Setting3</label> <input
class="privacytype" type="radio" name="privacy"
id="Setting3"
value="Setting3">
</fieldset>
I like to add a button on right most side of each radio control group in same row like this.
Please help me out.
Thanks.

Answer 1

One way to do this is to have to controlgroups side by side using a table:
<table class="privacylistdatatable">
<tr>
<td>
<fieldset data-role="controlgroup" id="privacylistdata" data-theme="c">
<label for="Setting1">Setting1</label>
<input class="privacytype" type="radio" name="privacy" id="Setting1" value="Setting1">
<label for="Setting2">Setting2</label>
<input class="privacytype" type="radio" name="privacy" id="Setting2" value="Setting2">
<label for="Setting3">Setting3</label>
<input class="privacytype" type="radio" name="privacy" id="Setting3" value="Setting3">
</fieldset>
</td>
<td class="rightColumn">
<fieldset data-role="controlgroup" id="privacylistdataBtns" data-theme="c">
Icon only
Icon only
Icon only
</fieldset>
</td>
</tr>
</table>
Then use some CSS to make things line up nicely:
.privacylistdatatable {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
.privacylistdatatable td {
padding: 0px;
}
.privacylistdatatable .rightColumn {
width: 24px;
}
.privacylistdatatable fieldset {
margin: 0;
}
#privacylistdata .ui-radio label {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
#privacylistdataBtns .ui-btn {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
border-left: 0 !important;
}
#privacylistdataBtns .ui-btn-inner {
padding-top: 9px;
padding-bottom: 9px;
}
#privacylistdataBtns .ui-last-child .ui-btn-inner {
padding-top: 9px;
padding-bottom: 9.5px;
}
DEMO