Horizontal radio buttons

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 6 years, 11 months ago by GusRuss89.

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

That’s a great improvement.

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