Error Description

The registration form of the joomla core shows the radio buttons on each other. In my case, it´s the privacy line of the website and the terms of use, which are defined by me.

A screenshot of the error:

Reason

The error is in the Bootstrap-CSS. It defines the radio buttons with the css class radio. In this one, the button is defined with a float:left and with a margin-left with -20px.

.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"]
{
float: left;
margin-left: -20px;
}

Debuggingn / Workaround

As a workaround the class of the radio buttons can be defined in your template / custom css. To do this, paste the following code in the css. The code overwrites float:none and the predefined margin. I have restricted the following code additionally to the ID jform_privacyconsent_privacy for the privacy line and jform_profile_tos for the terms of use. So that the code only take affect for a small scope.

 

#jform_privacyconsent_privacy input[type="radio"], #jform_profile_tos input[type="radio"]
{
float:none;
margin-left: 5px;
margin-right: 0px;
}