Home/ Questions/Q 9055347
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T13:56:02+00:00

I am creating a mobile app using JQM and trying to center radio buttons

  • 0

I am creating a mobile app using JQM and trying to center radio buttons grouped in a fieldset with a data-role=”fieldcontain”. I have found that if I use JQM 1.2.0, the radio buttons are not centered, but rather stacked on top of each other (see image). Switching back to JQM 1.0.0 corrects the issue and the buttons are perfectly centered (see image). Suggestions on how to correct this issue? Thanks, in advance.

    <div data-role="header">
    </div>

    <div data-role="content">
       <div id="fieldcontain-wrapper" style="display:table;margin:0 auto;">
            <div data-role="fieldcontain">
                <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
                        <input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" />
                        <label for="radio-choice-c">&nbsp;&nbsp;Home&nbsp;&nbsp;</label>
                        <input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
                        <label for="radio-choice-d">&nbsp;&nbsp;Away&nbsp;&nbsp;</label>
                </fieldset>
            </div>
       </div>
    </div>

JQM 1.2.0
JQM 1.0

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is a strange jQM bug caused by your wrapper div. This css will fix it:

    .ui-controlgroup-controls {
    width: 100% !important;
}

    For some reason, after same min width is reached width of ui-controlgroup-controls becomes 78 %. Really strange.

    And here’s an example, remove a css block to see lack of its behavior.
    http://jsfiddle.net/Gajotres/vHy9U/

    • 0