Problem with Radio Buttons alignment (CSS and/or Custom HTML)

Hello,

I'm new to ChronoForms and chose it to create a complex registration form. I've got most of it working, but am having an awful time with the radio button alignment. I have 4 radio button questions, each with different needs for layout.

The first is simple: Gender: Male Female
It's not a problem.

The second is a list of grade levels:
[*] None
[*] Pre-School
[*] Kindergarten
[*] 1st Grade
[*] 2nd Grade

The third is similar to the second but has longer, multi-word answers.

Problems I'm running into:
1) All the options are placed on one line. I'd prefer to place them in a vertical list (as shown above). I've tried using <p> and <div> in Custom code, but that has no effect.

2) Chronoforms pushes the label onto a new line (separating it from the radio button) and/or pushes part of the label (in the case of multi-word labels) to another line.

You can see the form here: http://fsbclajunta.com/2014-vbs-registration

I've tried everything I can think of to adjust the CSS and/or Custom html, and haven't been able to make it work.

Can someone tell me how to force each radio item onto it's own line and not have a lot of vertical space between them?

Thanks,
Teresa

Hi Teresa,

Have you tried the Radios Vertical option on the Other tab of the Radio Box element?

Bob

Wow, GreyHead, thank you so much! Radios Vertical fixed the problem, and Labels Over Text helped with some other issues.🙂 And thanks for the quick reply. I didn't see it until this morning because it went to my junk box. (Now Hotmail knows Chronoforms mail isn't spam.)

Just a couple small things remaining: How to get the vertical Radio buttons to be indented (e.g. 20px from the left), and how to tighten up the vertical spacing for the Radio buttons just a little? (I can live without these fixes, but think it would make the form a little more user friendly.)

Thanks,
Teresa

Hi Teresa,

You need to add some CSS to a Load CSS action. Something like this

.radios_over input {
  margin-left: 20px !important;
  margin-top: 0px !important;
  margin-bottom: 2px !important;
}

Bob

Thank you again, Bob! Your CSS, and just a bit more tweaking (adding a bit more space between the questions), and the form looks great! Thank you so much!

God bless,
Teresa