We're working with a CMS (Kentico) which internally uses an ASP.NET webforms RadioButtonList
to render radio buttons on custom forms. Via the CMS we can still control the RepeatDirection
and RepeatLayout
properties of this control but little else.
The requirement is to display the radios horizontally so RepeatDirection
Horizontal and RepeatLayout
Flow achieves this. However the rendered markup is just an alternating list of <input />
and <label />
elements.
The problem arises at narrow device widths when the radio button list starts to wrap. The <input />
and <label />
elements wrap individually so you lose the visual grouping between control and label.
Since we can't affect the markup directly, what option do we have to simulate an HTML grouping? I fear this may be a JS-only solution which I'd like to avoid if possible.