Checkboxes Alignment

Hi,

I’m wondering if we can layout the multi option checkbox that i have in the registration form.

I did some research and i saw this : https://www.s2member.com/forums/topic/please-help-loginreg-design-issues/#post-24264

It only let me add break lines, i do want my checkboxes to be in like 3 column. if this is not possible then the br tag will do, but the first checkbox has space in it… I follow bruce instructions by adding float left in the registation design form, no luck.

Let me know my options .

Thank you

Hi Jeremy
I am having the same problem please see my post on this forum

The problem is that the checkbox and label have no wrapper div so it is difficult to move them as one unit.
I have asked for a quote from a developer to create a plugin to solve the problem as I am not experienced enough to create the php hook and filter needed.

It’s easy to change the actual file but will be overwritten on update
wp-content/plugins/s2member/src/includes/classes/custom-reg-fields.inc.php
add a div opening tag at line 213 before the input tag and then add the closing /div tag on the next line after the label tag

Did you manage to get the break tag br /> at the end of each option. it makes no difference to my layout (doesn’t even show up in the rendered code I presume you just added it to the end of each option?

Paul M

May I recommend s2Member’s Knowledge Base? Most of the questions you ask are already addressed there.

This question has also been asked multiple times on this forum. Try searching before asking. The answer is to customize your form as explained here: https://s2member.com/kb-article/s2member-pro-forms/#-customizing-pro-forms

Then you can add a <div> or remove a <br> to your heart’s content.

Thanks Tim
I have followed the tutorial. The form sends ok but when I look in the users the newly created fields are not there in the users profile.

Then you didn’t follow the KB article. You can’t just create additional fields. You also need to follow the next step, just below, about creating a function to make sure that those fields are stored.

Hi Tim
I did add the file into the mu-plugin folder. I used paypal-registration-form.php as I am not charging for membership so no PayPal is needed

I have ticked the integrate with buddypress checkboxes
I did notice that other form fields and labels within the form are wrapped in a div with ids but the tutorial doesn’t include these wrappers for adding other fields, should this matter?

But you didn’t create the s2-store-custom-pro-form-fields.php file, did you?

Hi
Yes I created the s2-store-custom-pro-form-fields.php file copied and pasted the code from the tutorial into it I then saved it to the wp-content/mu-plugins folder
I copied the tutorial including the form field names so as not to make a mistake
PaulM

Is there any additional steps I need to do to include the new fields in the WP user-edit.php?
Thanks

Oh Pro-Forms! Unfortunately, this other website i’m creating only uses the free version, I’m fine with the br thing i just need to resolve the indentation of the first checkbox. float: left didn’t work for me.

Jeremi, you have to understand that posting screenshots and images here is useless if you want anyone to help. We have to know the actual URL of the relevant page because then we can use the tools built-in to the browser to work out what the solution is.

You can have a go yourself. Hit F12 when you’re on the page and edit the CSS rules that you see on the relevant element. (It will change how it appears to you, but won’t actually change anything on your site.) Then you can try lots of things to see what works.

Hi

http://cportal.systemisedemo.com.au then go to register

I tried searching the css elements already. no luck.

CSS isn’t the only thing you can check with the browser inspector.

You have one character of whitespace before each of the affected checkboxes. You need to remove it in each case.

Hi Tim,

I checked the form and there are only br’s after the checkboxes, not sure why it’s adding those spaces. I’ll investigate further but still let me know if you guys already have a solution. Thank you

Honestly, I’ve just given you the solution! If it’s not working for you, copy and paste it into a plain text file and save. Then check the file for added spaces and, when you’re sure there are none, save it again and copy and paste it back in.

Hi Jeremy
did you add the br tag in the Registration/Profile Fields Options like in the image:

Or did you place it somewhere else?
Thanks
Paul m

Hi Guys,

It’s all good now. I added the float left thing which fixed the alignment and removed the extra space. added some nbsp space to align it more. Yes I did use br same as yours

Thanks a lot!