css - I am not able to align my html control to right in html table -
my requirement want align radio button left in table cell, not happening below code:
my code
<div data-role="collapsible" data-theme="b" data-content-theme="b"> <h3>action</h3> <table class="tabledata" width="100%"> <tr> <td class="td1"> <p> <input id="radio1" type="radio" value="approve" /></p> </td> <td class="td2">approve</td> </tr> <tr> <td> <input id="radio2" type="radio" /></td> <td class="td2">reject</td> </tr> <tr> <td> <input id="radio3" type="radio" /> </td> <td class="td2">send requestor</td> </tr> <tr> <td>amount approved domestic sector : </td> <td> <input id="text1" type="text" /></td> </tr> <tr> <td>remarks : </td> <td> <input id="text2" type="text" /></td> </tr> <tr> <td class="tabledata"> <input id="button1" type="button" value="submit" /> </td> </tr> </table> </div> my css classes:
.td1 { vertical-align:middle; text-align:right; } .td2 { text-align: left; } actually want keep radio button , corresponding text in table row combining 2 columns , centre aligned , submit button shoud centre aligned in table row since using jquery mobile datarole guess not happening.please me look.
after adding script in head getting below output:

remove ui-radio class each radio button.
$('[type=radio]').each(function () { $(this).closest('div').removeclass('ui-radio'); }); and add class td1 each radio button.
<tr> <td class="td1"> <input id="radio1" type="radio" value="approve" /> </td> <td class="td2">approve</td> </tr> <tr> <td class="td1"> <input id="radio2" type="radio" /> </td> <td class="td2">reject</td> </tr> <tr> <td class="td1"> <input id="radio3" type="radio" /> </td> <td class="td2">send requestor</td> </tr> alternative method: no jquery code required nor custom css styles. read more here.
why don't use styled radio buttons, in below demo.
Comments
Post a Comment