javascripthtmlcssjquery-mobilejquery-mobile-radio

How do I display vertical radio buttons in the horizontal style using jquery-mobile?


Jquery-mobile can display sets of radio buttons on a horizontal grouping with the actual selection box suppressed and selection indicated by the background text colour by adding the attribute 'data-type="horizontal"'.

It can also display a vertical set, which retains the boxes and does not set the background colour, by setting 'data-type="vertical"'.

Is there a way to change the vertical styling to match the horizontal styling? That is, suppress the boxes and use the background text colour to indication selection.

FYI, we're using jquery-mobile 1.3.2.


Solution

  • This feature is not built into jQM, but you can make it happen with some CSS and script.

    Given standard vertical markup:

    <fieldset data-role="controlgroup" data-mini="true" class="vertBackground">
        <legend>Vertical, mini sized:</legend>
        <input type="radio" name="radio-choice-v-6" id="radio-choice-v-6a" value="on" checked="checked" />
        <label for="radio-choice-v-6a">One</label>
        <input type="radio" name="radio-choice-v-6" id="radio-choice-v-6b" value="off" />
        <label for="radio-choice-v-6b">Two</label>
        <input type="radio" name="radio-choice-v-6" id="radio-choice-v-6c" value="other" />
        <label for="radio-choice-v-6c">Three</label>
    </fieldset>
    

    I gave the controlgroup a class of vertBackground to make the jQuery and CSS selectors specific to this group. I apply some CSS to hide the check marks and move the text back to the left of the button:

    .vertBackground .ui-icon{
        display: none;
    }
    .vertBackground .ui-btn-inner{
        padding-left: 11px !important;
    }
    

    Finally I add script that checks when the radio buttons change, and add the class ui-btn-active to the label that is currently checked:

    $(document).on("pageinit", "#page1", function(){
        SetActive();
    
        $(".vertBackground input[type='radio']").on("change", function(){
            setTimeout(SetActive, 0);        
        });
    });
    
    function SetActive(){
        $(".vertBackground .ui-radio-off").removeClass("ui-btn-active");
        $(".vertBackground .ui-radio-on").addClass("ui-btn-active");    
    }
    

    Here is a DEMO