Options overlap Radio/Checkbox buttons

Velexia 06 Jan, 2010
I'm new to this, but I'm running into a problem where the label for each of my radio or checkbox buttons will left align over top of the button images themselves. They still work, but it looks terrible. It only seems to happen with the default template. The other form template works fine, but it really doesn't look as nice as the default template. Is there anything I can do to stop the options from overlapping their respective buttons?
GreyHead 06 Jan, 2010
Hi velexia,

My guess is that you are using a RocketTheme template with RokCandy (or the new Gantry Framework) enabled.

Turn off RokCandy and all will be well, or edit the CSS files to avoid the problem,

Velexia 06 Jan, 2010
I am using a RocketTheme template. That didn't even occur to me. Thanks!
Velexia 06 Jan, 2010
Do you know where in the CSS files I would need to edit?
GreyHead 06 Jan, 2010
Hi Velexia.

Sorry, no I don't, check with FireBug in Firefox for quick diagnosis (but be aware that IE may load different CSS files). You can also search here for similar thread (try searching on 'RokCandy') but I don't remember any definitive fixes.

GreyHead 16 Feb, 2010
Hi Shala,

You have RokChecks on. Looks nice :-)

nml375 16 Feb, 2010
From a quick look, it would seem the padding attribute for ".rokradios, .rokchecks" is being overridden by ".form_element label" and ".form_element .check_label" in the ChronoForms CSS.

Try this: locate the template.css file of your template, and search for the ".rokradios, .rokchecks" directive. Alter the properties as below:
.rokradios, .rokchecks {
/* Change this:
  padding: 1px 5px 7px 24px;
  line-height: 175%;
   into this: */
  padding: 1px 5px 7px 24px !important;
  line-height: 175% !important;

That should work for both radiobuttons and checkboxes.

dalvazquez 17 Feb, 2010

You are officially my hero. I had to deliver this form by last night and I've being pulling my hair with the radio/check box overlaps, I didn't have Rokcandy installed and as a matter of fact I uninstalled the Rokgantry in the case that was the deal, but nothing happened. Now I can use the Rokgantry framework and the check box at the same time. Thank you so much.

samuel1376 12 Mar, 2010
Hi nml375, I'm having the same troubles with a RocketTheme template.

Where should I add the !important!; tags?

My template.css has;

#main-body .rokradios {background-position: 0 -451px;background-repeat: no-repeat;}
#main-body .rokradios-active {background-position: 0 -679px;background-repeat: no-repeat;}
#main-body .rokchecks {background-position: 0 -1347px;background-repeat: no-repeat;}
#main-body .rokchecks-active {background-position: 0 -1575px;background-repeat: no-repeat;}

The template's style2.css has;

.rokradios, .rokchecks, .rokradios-active, .rokchecks-active {background-image: url(../images/style2/mainbody/rokinputs.png);}

Thank you very much.
samuel1376 12 Mar, 2010
nml375, disreguard my last post. I found the .rokradios, .rokchecks in my template.css. This works great!

Thank you for the information!!
yossarian_f 29 Jul, 2010
Hi. I am having the old option text over the radiobutton/checkbox issue. I am using Gantry 3.0.4, and I cannot for the life of me find any mention of rokradio etc in an of the Gantry-related CSS files!

Can anyone help before I throw my laptop out of the window, please?

GreyHead 30 Jul, 2010
Hi yossarian_f,

The setting will be something like this. You may be able to use the exclusion option if you want the other input styling.

yaksushi 23 Nov, 2010
anyone know what the input style exclusion is for chronoforms? I'd like to try what grey said above.
GreyHead 23 Nov, 2010
Hi yaksushi ,

Just look at the page source - I think it's cf_checkbox.

This topic is locked and no more replies can be posted.