Topic-icon Social Registration Page > Privacy & Terms NOT shown

Active Subscriptions:

None
Hi guys,
Clicking on a Social Button (you can see it in action on this LIVE site be careful ) > I'm redirected to the Social Registration Page > at the bottom I have the Registration from, but with:
- User - Terms and Conditions plugin enabled
- System - Privacy Consent plugin enabled (right now disabled on the live site)

1 - the two linked title labels "Privacy Policy" and "Terms and Conditions" are not shown - here an image

2 - the 2 radio check (2+2) are not shown, while, I tested , are regularly present in the standard Joomla registration page (so i suppose it is not because of template).
I'm not a developer, anyway, trying to investigate on them, I found for this second point that, as far as I see, a:
.form-check-inline input[type="radio"] {
display: none;
}
code is applied here. But, really, Where did that code come from?

Please Can you help on solving these two Bugs ?
The topic has been locked.
Support Specialist
3 years 11 months ago #66301 by mel
1.a. "Terms and Conditions" is not shown because that anchor tag has a "modal" class on it, and your template 507panama.com/templates/shaper_helixulti...ss/bootstrap.min.css line 6 is setting that class to display none.
You can fix it with
#jfbc_loginregister a.modal {
position: initial;
display: block;
}
If you want the * mark before the label, you'll have to add CSS to do this (or rearrange that * span before the label and float it left)

1.b. I don't see a heading or title in your screenshot for Privacy Policy?

2. The radio buttons are not showing for I agree / No because of the template again
507panama.com/templates/shaper_helixultimate/css/template.css line 1086. You can fix it with
#jfbc_loginregister .form-check-inline input[type="radio"] {
display: initial;
}
The topic has been locked.
Active Subscriptions:

None
3 years 11 months ago #66332 by joomleb
Hi Mel,
really many thanks for your answer and, in special, for your explications, really really too appreciated, thanks! Now:

1b - Sorry, my mistake, a wrong number into my Custom CSS, I have corrected it.
1 - To display the * mark before the label on same line, I have to change "display: block;" to contents / inherit / initial / inline / or others. Please, What is the best one to choose ?
I noted that this issue is not present on the Registration page ( you can check it here ), I investigated and noted that there the Helix Ultimate template is applying:
.registration .modal {
display: inline-block;
position: inherit;
}
From your point of view at the end, What is the best solution ?

2 - Radio Buttons - Again, I noted that this issue is not present on the Registration page ( you can check it here ), I investigated and noted that there the Helix Ultimate template is applying:
.registration .form-check-inline input[type="radio"] {
display: inline-block;
}
And, again, from your point of view at the end, What is the best solution ?

Maybe, Could it be solved adding a "registration" class to the JFBConnect Social Registration Page ?
Is there a way to add a Class to the JFBConnect Social Registration Page ?
PS - Following your suggestions I found this fix suggestion for similar issue.

3 - Why the "Privacy Policy" label link has a "modal" class assigned, while the "Terms & Conditions" has a strange "hasPopover required" class assigned ?
At least, Should not they be the same ?

4 - Please, Is there a way to have the password/email fields aligned col-md-6 as in the this Registration page ?:
- password > confirm password
- email > confirm email
4A - Please, How can we add classes to the fields ?
4B - Please, How can we add classes to the JFBConnect Social Registration Page ? (Maybe Is there a simple way through JavaScript?)
The topic has been locked.
Support Specialist
3 years 11 months ago #66341 by mel
It seems as thought you may have resolved many of these issues already before I could respond. If so, you can ignore the following.

To display the * mark before the label on same line, I have to change "display: block;" to contents / inherit / initial / inline / or others. Please, What is the best one to choose ?

Honestly I'm not a CSS expert. I don't have a recommendation.

I noted that this issue is not present on the Registration page ( you can check it here ), I investigated and noted that there the Helix Ultimate template is applying:
.registration .modal {
display: inline-block;
position: inherit;
}
From your point of view at the end, What is the best solution ? Maybe, Could it be solved adding a "registration" class to the JFBConnect Social Registration Page ?
Is there a way to add a Class to the JFBConnect Social Registration Page ?

If you need a class around the div, I'd suggest doing a template override of our loginregister view at /components/com_jfbconnect/views/loginregister/tmpl/default.php

Please, Is there a way to have the password/email fields aligned col-md-6 as in the this Registration page ?:
- password > confirm password
- email > confirm email
4A - Please, How can we add classes to the fields ?
4B - Please, How can we add classes to the JFBConnect Social Registration Page ? (Maybe Is there a simple way through JavaScript?)

Honestly, I think at this point, if you want things changed specifically like this, you'll need to do your own template override and update CSS styles.

In your template override, you could do something like the following - put a div around each label and field, add class col-sm-6 which sets the width of each to 50% and then float the first one left.

File Attachment:


File Attachment:
The topic has been locked.