0

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:

enter image description here

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:

enter image description here

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.

4
  • This is most likely your template CSS overriding the default bootstrap styling
    – Lodder
    Apr 26, 2019 at 8:02
  • Thanks! I took a quick look at inspect object / styles, but I did not see anything obvious there causing this. Any hints on what CSS attribute should Iook for? Apr 26, 2019 at 8:05
  • Would you be able to provide a link to your site?
    – Lodder
    Apr 26, 2019 at 8:37
  • Please try this link: strange that the checklists are fine, but the radios are not. I'd like to have all radios aligned as the checklists on the whole site. Thanks! dev.gonativeguide.com/de/tour-preferences?tid=120 Apr 26, 2019 at 13:01

2 Answers 2

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.

1
  • OK, thanks, this makes sense. However when I tried to test your hypothesis by changing in the inspect element / styles window the label's display property to inline or inline-block it puts ALL(!) the labels and radios in the same line. Another problem is that in the inspect object / styles there is only one reference to my template stylesheet and it says nothing about the label display. So how can I find where my template is wrong? Thanks! Apr 26, 2019 at 14:32
0

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.)

2
  • ...I also noticed some spastic/bad scrolling behavior on the page I visited. Apr 27, 2019 at 2:47
  • thanks for thi quick fix above. I agree that it would be best to fix the root cause of the issue. I understood that my template somehow overrides the default behaviour of the radio list. Any hints on how I could figure out which part of my template is causing this strange behaviour? Apr 27, 2019 at 7:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.