radio buttons not lining up

Hi,
I am trying to use radio buttons and the alignment is off. Here is a link.

http://174.120.117.190/~aafcredi/index.php?option=com_chronocontact&Itemid=76

Can you help me fix this? Thanks for your help.

What is actually happening is that the text is over the radio buttons. NOt sure how that happened. Do you know what causes this?

Thanks

Hi Kellie,
This is a classic issue with RocketTheme templates featuring "Form Styling". Check your template settings, and disable the Form Styling option, and the alignment should be fine once again.

Further though, the id's of the different form inputs are not unique, causing the labels to not work properly; clicking the "Are you employed" yes-label will actually tick the "Have a trade in" yes-checkbox to be checked. Furthermore, both "Are you employed" and "Have a trade in" use the same name for inputs (check0[]), so you won't be able to tell these two apart.

/Fredrik

Thank you so much.

Should I use radio buttons for one and check boxes for the other? Also I looked for "form styling" in my template and did not see it. Do you know where this is? How can I make the check boxes horizontal and not vertical? thanks for your help

Kellie

Hi Kellie,
Sorry, got the name incorrectly; it's called "Input Styling", and is available under the "Advanced" group of the Template Setup.

In order to have the options on a single row, you'll have to edit the form code manually (you could also fix the issues with the non-unique id's here aswell).
In the form code, look for a piece of code similar to this:

<div class="form_item">
  <div class="form_element cf_checkbox">

    <label class="cf_label" style="width: 150px;">Have A Trade In?</label>
    <div class="float_left">
      <input value="Yes" title="" class="radio" id="check00" name="check0[]" type="checkbox" />
      <label for="check00" class="check_label">Yes</label>
      <br />
      
<input value="No" title="" class="radio" id="check01" name="check0[]" type="checkbox" />
      <label for="check01" class="check_label">No</label>

      <br />
      

    </div>
    
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_checkbox">
    <label class="cf_label" style="width: 150px;">Are You Employed?</label>
    <div class="float_left">

      <input value="Yes" title="" class="radio validate-one-required" id="check00" name="check0[]" type="checkbox" />
      <label for="check00" class="check_label">Yes</label>
      <br />
      
<input value="No" title="" class="radio validate-one-required" id="check01" name="check0[]" type="checkbox" />
      <label for="check01" class="check_label">No</label>
      <br />
      

    </div>
    
  </div>

  <div class="cfclear"> </div>
</div>

Change it to this:

<div class="form_item">
  <div class="form_element cf_checkbox">
    <label class="cf_label" style="width: 150px;">Have A Trade In?</label>
    <div class="float_left">
      <input value="Yes" title="" class="radio" id="check00" name="check0[]" type="checkbox" />
      <label for="check00" class="check_label">Yes</label>
      <input value="No" title="" class="radio" id="check01" name="check0[]" type="checkbox" />
      <label for="check01" class="check_label">No</label>
    </div>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_checkbox">
    <label class="cf_label" style="width: 150px;">Are You Employed?</label>
    <div class="float_left">
      <input value="Yes" title="" class="radio validate-one-required" id="check10" name="check1[]" type="checkbox" />
      <label for="check10" class="check_label">Yes</label>
      <input value="No" title="" class="radio validate-one-required" id="check11" name="check1[]" type="checkbox" />
      <label for="check11" class="check_label">No</label>
    </div>
  </div>
  <div class="cfclear"> </div>
</div>

What I've done, is simply remove the <br /> elements so that the inputs remain on the same line. I also changed the name and id's of the second form input.

Be adviced though, that the Wizard Editor does not handle manual code edits - if you use the Wizard edit on this form again, these manual changes will be lost.

/Fredrik