Radio button not align properly at center in jquery mobile version 1.0?

Question

I used radio button in my jquery mobile application and i'm using jquery mobile 1.0 and jquery 1.6.4. The problem is it always aligned left. So, i tried to move at center but it is not working. How to fix this? 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>

Discomposure

Answer 1

You must wrap radiobuttons in a div with fixed width and margin set to auto on the fieldset. Here's how - of course it's neater to not use inline 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>

Ecg

Answer 2

you need to over-write 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 which will over write above property...something like this-

.leftAlign{left: 303px;}

then assign this class to the span which contains the customized radion button using jquery...

Lyons

i have tested it on my machine..it's working for me...make sure your customized css file comes after jquery mobile css file – Lyons

can you re-produce your problem on jsfiddle – Lyons

this is not centering the buttons, only moving the left-margin. There should be a solution to center the radio buttons. – Ecg

Answer 3

I try too much and finaly 1st Answer of this question resolve my problem. Its look like fix to jquery mobile bug but it should be handle properly without doing such patch work :). Thanks Hampus.

Burmeister

Answer 4

I'll pick up the link given by nir:

Wrap the fieldset into a div with style display: table; margin: 0 auto;. This might be a bit of a hack but it works without having to set any width or 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>

Encrimson

Answer 5

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

Wintertide

Even if your link is helping to find the problem, please provide at least basic details to solve the problem and give the link for more details. – Clothbound