CODEWITHSUNDEEP
jqueryjquery-mobile
azsl1326
azsl1326

Reputation: 1410

Centering a FieldSet using JQM 1.2.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

Upvotes: 0

Views: 92

Answers (1)

Gajotres
Gajotres

Reputation: 57309

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/

Upvotes: 1

Related Questions