Horizontal radio buttons

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author GusRuss89

    (@gusruss89)

    8 years, 2 months ago

    Hi @2020media

    There’s no built-in way to organise your radios like this, but if you only have a few radios you can use this CSS to make them appear inline.

    First, add a class inline-control to your cf7 radio field. E.g.

    [md-radio label="Choose"]
[radio radio-test class:inline-control label_first use_label_element default:1 "One" "Two" "Three"]
[/md-radio]

    Then add this CSS under Appearance > Customize > Material Design Forms > Custom CSS.

    #cf7md-form .inline-control .wpcf7-list-item {
    width: auto;
    margin-right: 30px;
}

    This will put your radio options inline with a 30px gap between each. You can also apply this class to checkbox fields.

    A not-too-distant-future version of the plugin will have this as a feature, and also the option to group checkboxes and radios into equal-width columns.

    Thanks,
    Angus

    • This reply was modified 8 years, 2 months ago by GusRuss89.
    Plugin Author GusRuss89

    (@gusruss89)

    8 years, 2 months ago

    Hi @2020media

    v1.7.0 was released today, which includes a new display attribute for the md-checkbox, md-radio and md-switch shortcodes.

    The options for display are: stacked (default), inline, columns-2, columns-3 or columns-4.

    E.g.

    [md-radio label="What is your favourite food?" display="inline"]
[radio radio-671 default:1 "Pizza" "Cake" "Cookie dough" "Steak" "Burgers"]
[/md-radio]

    or

    [md-radio label="What is your favourite food?" display="columns-2"]
[radio radio-671 default:1 "Pizza" "Cake" "Cookie dough" "Steak" "Burgers"]
[/md-radio]

    This is now the recommended way to achieve inline or columns of items.

    Thanks,
    Angus

    Thread Starter 2020media

    (@2020media)

    8 years, 2 months ago

    That’s a great improvement.

    Thank you for updating this plugin – it’s looking really good now!

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Horizontal radio buttons’ is closed to new replies.