Question

hi i am in mobile app and i am trying to create an horizontal radiobutton full width with 33% every button.

here is my code

                items.push('<div id="id' + i + '" data-role="fieldcontain"><fieldset data-role="controlgroup" data-type="horizontal" class="row_b">');
                items.push('<input type="radio" name="radio'+ i +'-choice-1" id="radio'+ i +'-choice-1" value="choice_1" /><label for="radio'+ i +'-choice-1">test1</label>');
                items.push('<input type="radio" name="radio'+ i +'-choice-1" id="radio'+ i +'-choice-2" value="choice_2" /><label for="radio'+ i +'-choice-2">test2</label>');
                items.push('<input type="radio" name="radio'+ i +'-choice-1" id="radio'+ i +'-choice-3" value="choice_3"/><label for="radio'+ i +'-choice-3">Clear</label>');
                items.push('</fieldset></div>');

                html += items.join('');

                list.append(html).trigger('create');

I try this solution JQueryMobile radio buttons with fieldcontain width issue on desktop but it does not works for me…

my html is as follow

.row_b .ui-btn {
    text-align: center;
    width: 33%;
}

please advice

Answer 1

I wont get time to try this for myself until this evening but I have the same problem and this link might solve our problem: http://the-jquerymobile-tutorial.org/jquery-mobile-tutorial-CH13.php