Align radio button group in forms on a single line

[rioksane]

Align radio button group in forms on a single line. Now they are in single column and it looks bad and wastes space.

Example form: https://plone.org/foundation/plone-org-feeback-form

This css should fix it:

.radio-group { display: inline-flex; }

See example images: This is the current situation:

This is the preferred outcome:

[stevepiercy]

If the radio button option is a long string of text, then the options would look bad inline.

I think that this should be an editor's choice to display both checkbox and radio button options either vertically or horizontally. Here is just such an example for a soccer referee send off report website I operate.

[rioksane]

@stevepiercy A very good point, you are correct. Option would be preferable, or some kind of automatic rule that changes the layout accordingly. But this is not so simple.

[stevepiercy]

One other option would be to have two widgets, one for each desired alignment.

It depends on whether the HTML is different between the two options or whether it is only a CSS change.

[AnshulKahar2729]

I think we can do that by checking the content length of radio buttons that we will decide. If is found above the certain length, we can show it in vertical direction else let it be in horizontal direction to look good.