Radio button not centered correctly in jQuery mobile version 1.0?

Question

I used the switch in jQuery mobile app and I am using jquery mobile 1.0 and jquery 1.6.4. The problem is that it always aligns to the left. So, I tried to move in the center, but it does not work. How to fix it? Thanks in advance.

<div id="userOptionGroup" data-role="contain"> <fieldset data-role="controlgroup" data-type="horizontal" data-theme="b" style="font-size:12px;border:2px;"> <input type="radio" data-theme="b" name="radio-choice-b" id="radio-choice-wuser" value="windowUser" checked="checked" /> <label for="radio-choice-wuser" style="font-size: 12px;" class="ui-btn-section-active" id="lblWindowUser">win user</label> <input type="radio" data-theme="b" name="radio-choice-b" id="radio-choice-muser" value="mfileUser" /> <label for="radio-choice-muser" style="font-size: 12px;" id="lblMfileUser">M file user</label> </fieldset> </div> 

Answer 1

You must wrap the radio beads in a fixed-width div and margins set to auto in the fieldset. Here, of course, it is not recommended to use the built-in css.

 <fieldset data-role="controlgroup" data-type="horizontal" style="text-align: center"> <div style="width: 200px; margin: 0 auto;"> <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" /> <label for="radio-choice-1">A</label> <input data-theme="e" type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" /> <label for="radio-choice-2">B</label> </div> </fieldset> 

Answer 2

you need to rewrite this class in your custom css file

 .ui-checkbox .ui-btn-icon-left .ui-icon, .ui-radio .ui-btn-icon-left .ui-icon { left: 303px;// can vary according to your lay out } 

or you can define your own class that will write the properties above ... something like this -

 .leftAlign{left: 303px;} 

then assign this class a span that contains the customized radion button using jquery ...

Answer 3

I try too much and finally the first answer to this question is solving my problem. Its similar to fixing a jquery mobile bug, but it should be handled correctly without doing this fix work :). Thanks, Hampus.

Answer 4

I will take the link pointed by nir :

Wrap the fieldset in a div with the display: table; margin: 0 auto; style display: table; margin: 0 auto; display: table; margin: 0 auto; . This may be a bit hacky, but it works without having to set the width and margin.

 <div style="display: table; margin: 0 auto;"> <fieldset data-role="controlgroup" data-type="horizontal" data-theme="b" style="font-size:12px;border:2px;"> <input type="radio" data-theme="b" name="radio-choice-b" id="radio-choice-wuser" value="windowUser" checked="checked" /> <label for="radio-choice-wuser" style="font-size: 12px;" class="ui-btn-section-active" id="lblWindowUser">win user</label> <input type="radio" data-theme="b" name="radio-choice-b" id="radio-choice-muser" value="mfileUser" /> <label for="radio-choice-muser" style="font-size: 12px;" id="lblMfileUser">M file user</label> </fieldset> </div> 

Answer 5

Check out: https://forum.jquery.com/topic/radio-button-problem-rc3