Jform radio button not displayed or not horizontally aligned with its label

Question

I'm working on a custom Joomla module displaying a JForm with some radio buttons. I'm using the sample code described for Joomla 3+ styling with arbitrary values described here

<field name="PrevVisits" type="radio" default="0" label="MOD_GNG_TOURPREF_PREV_VISITS" description="" class="btn-group">
                    <option value="Yes">MOD_GNG_TOURPREF_PREV_VISITS_YES</option>
                    <option value="Some">MOD_GNG_TOURPREF_PREV_VISITS_SOME</option>
                    <option value="No">MOD_GNG_TOURPREF_PREV_VISITS_NO</option>
</field>

My problem is that the radio buttons and for some reason not displayed at all, only the label:

I tried to remove the class tag, and this way the radio buttons are displayed, but the buttons and corresponding label are not horizontally aligned, but underneath each other:

How should I modify my code to make sure the both the radio buttons and labels are displayed and the corresponding buttons and labels are horizontally aligned?

Thanks! W.

Answer 1

Ok I see the issue. If you inspect the element for both the checkbox and radio, you'll notice the checkbox input is inside the label, but the radio input is before the label.

Checkbox:

<label for="main_Interests7" class="checkbox">
    <input type="checkbox" id="main_Interests7" name="main[Interests][]" value="language"> Sprache
</label>

Radio:

<input type="radio" id="main_PrevVisits0" name="main[PrevVisits]" value="Yes">
<label for="main_PrevVisits0">Ja</label>

So due to label having it's display property set to block, it will appear at 100% width on a separate line.

The markup for these should be the same, so I believe it's a template override that may have changed the markup.

Answer 2

I agree with and recommend that you follow Lodder's advice that fixing the DOM is the most appropriate way to fix your issue.

As a pure css workaround / hack / quick fix, you could hardcode the label line height, make the radio buttons float left and vertically align the radio button with a top margin.

I have tested these adjustments to be work as desired on a few different devices / browsers with differing zoom levels and it seems to hold up nicely. (then again, with so many differing browser and device behaviors, there's likely to be one that breaks the intended style).

.radio label {            /* or remove the .radio parent here for consistency */
    line-height: 22px;
}
.radio input[type=radio] {
    margin: 5px 3px 0 0;
    float: left;
}

(I tested on https://www.dev.gonativeguide.com/de/tour-preferences?tid=12 because 120 was no longer available.)