Forums

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?

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,

Bob

I am using a RocketTheme template. That didn't even occur to me. Thanks!

Do you know where in the CSS files I would need to edit?

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.

Bob

I'm having the same issue in IE (fine in other browsers). I am using a Rockettheme template but RokCandy isn't installed and it's not a Gantry website. Any other ideas on what is conflicting.

http://02f6b75.netsolhost.com/iadev/contact/request-form

Shala

Hi Shala,

You have RokChecks on. Looks nice :-)

Bob

Hi,
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.

/Fredrik

Fredrik,

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.

Dalia

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.

nml375, disreguard my last post. I found the .rokradios, .rokchecks in my template.css. This works great!

Thank you for the information!!

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?

Thanks

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.

Bob

anyone know what the input style exclusion is for chronoforms? I'd like to try what grey said above.

Hi yaksushi ,

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

Bob