CODEWITHSUNDEEP
jqueryjquery-uihtmljquery-mobileradio-button
selladurai
selladurai

Reputation: 6789

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

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>

Upvotes: 6

Views: 8496

Answers (5)

Ignitor
Ignitor

Reputation: 3065

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>

Upvotes: 0

nir
nir

Reputation: 1

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

Upvotes: -1

Anand Patel
Anand Patel

Reputation: 739

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.

Upvotes: 1

Hampus Brynolf
Hampus Brynolf

Reputation: 1336

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>

Upvotes: 8

Vivek
Vivek

Reputation: 11028

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...

Upvotes: 1

Related Questions