Response title
This is preview!
Controlgroup data-type=horizontal is not rendering correctly
in jQuery Mobile
•
5 months ago
I'm setting $.mobile.autoInitializePage = false,
building most of my content in js on $(document).ready(),
then calling $.mobile.initializePage().
I have a controlgroup with radio buttons which I create in js and insert above a listview. This is created, but it is rendering as vertically-stacked rounded buttons instead of grouped horizontal radio buttons.
The element after insertion, before $.mobile.initializePage() runs, looks like:
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="radio-choice-2" id="radio-choice-21" value="choice-1" checked="">
<label for="radio-choice-21">Grade</label>
<input type="radio" name="radio-choice-2" id="radio-choice-22" value="choice-2">
<label for="radio-choice-22">Stars</label>
<input type="radio" name="radio-choice-2" id="radio-choice-23" value="choice-3">
<label for="radio-choice-23">Name</label>
<input type="radio" name="radio-choice-2" id="radio-choice-24" value="choice-4">
<label for="radio-choice-24">Left to right</label></fieldset>
After $.mobile.initializePage() runs, I have:
<fieldset data-role="controlgroup" data-type="horizontal">
<div class="ui-radio">
<input type="radio" name="radio-choice-2" id="radio-choice-21" value="choice-1" checked="">
<label for="radio-choice-21" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="a" class="ui-btn ui-btn-up-a ui-btn-corner-all ui-radio-on ui-btn-active">
<span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Grade</span></span>
</label></div>... etc.
The correct classes are not being added to the parent fieldset element, and the label corner classes are not correct. It appears the controlgroup is just being ignored.
Does anyone have any ideas why?
1
