Jquery Mobile checkbox radio not having full CSS applied after dynamic creation

Question

I'm trying to get some dynamically created radio checkboxes to have full styling applied to them.

They're presently having the individual radio box object style being applied, however they lack styling to the whole list of checkboxes.

I was using this as my way of solving the problem, however there appears to be a difference between JQuery Mobile v1.4.2 and v1.1.1 - 1.1.1 automatically applies the grouped styling whereas 1.4.2 requires additional fields.

I've tried several things such as .checkboxradio("refresh");, but they all appear to do the same thing as .trigger("create");.

Here's the full version of the segment of my code:

HTML:

<div data-role="page" data-title="First Time" id="firstTime">
    <div class="ui-content">
        <form id="firstTimeSelectCampus">
            <fieldset data-role="controlgroup" id="firstTimeSelectCampusFieldset">
            </fieldset>
        </form>
        <p>
            You can change this under the settings menu.
        </p>
        <a href="#" id="firstTimeButton" class="ui-btn">Continue</a>
    </div>
</div>

JS:

var checked;
$("#firstTimeSelectCampusFieldset").children().remove();
$("#firstTimeSelectCampusFieldset").append("<legend>Select your default campus:</legend>");
for (var i = 0; i < campusArray.length; i++ ) {
    if (i === 0) {
        checked = ' checked="checked" ';
    }
    else {
        checked = "";
    }
    $("#firstTimeSelectCampusFieldset").append( 
        '<input ' +
        'type="radio" ' +
        'name="campus" ' +
        'id="' + campusArray[i].id + '" ' + 
        'value="' + campusArray[i].id + '" ' + 
        checked +
        '>' +
        '<label for="' + campusArray[i].id + '"' + '>' +
            campusArray[i].name +
        '</label>'
    );
};
$("#firstTime").trigger("create");

This is what I want it to look like:

This is what it currently looks like:

Here's a really minimised version of the problem (tried to get rid of everything unnecessary): http://jsfiddle.net/tbLSk/

There's a ton of similar questions out there, but I haven't been able to get any of the solutions to work 100%, so I'm assuming that I'm missing something pretty obvious.

Answer 1

you forgot the class btn-group-vertical

<div data-role="page" id="firstTime">
    <div id="lel" class="ui-content">
        <fieldset data-role="controlgroup">
            <div id="firstTimeSelectCampusFieldset" class="btn-group-vertical" data-role="controlgroup">
            </div>
        </fieldset>
    </div>
</div>

or:

<div data-role="page" id="firstTime">
    <div id="lel" class="ui-content">
        <div  class="btn-group-vertical" data-role="controlgroup">
        <fieldset id="firstTimeSelectCampusFieldset" data-role="controlgroup">
            </fieldset>
        </div>
    </div>
</div>