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.

  • This is most likely your template CSS overriding the default bootstrap styling – Lodder Apr 26 '19 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? – wanderlusted Apr 26 '19 at 8:05
  • Would you be able to provide a link to your site? – Lodder Apr 26 '19 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 – wanderlusted Apr 26 '19 at 13:01
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.

| improve this answer | |
  • 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! – wanderlusted Apr 26 '19 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.)

| improve this answer | |
  • ...I also noticed some spastic/bad scrolling behavior on the page I visited. – mickmackusa Apr 27 '19 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? – wanderlusted Apr 27 '19 at 7:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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