Forums

I have done a search and read through lots of posts about formatting radio boxes, but none seem to have the problem I do - the radio box is on one line, and the text to go with it is on the next line down!

This is only for radioboxes that have two selections, others that have more are showing fine.

http://www.pglleics.org.uk/site/index.php?option=com_chronoforms&tmpl=component&chronoform=join

The "Marital Status" is working fine, but all the "yes/no" questions are not!

Please advise🙂

Hi nuvelle,

The problem is this CSS in the load.css file:

.row div div, .row_main div div {
  width: auto;
}

It I replace auto with 600px then it looks OK again with the template. But making that change could affect other things on the site, you may need to use CSS selectors to over-ride this CSS for the form.

Bob

I changed the code in load.css to the following:

.row div div,
.row_main div div {
  width: 600px;
}

But the buttons are not fixed.

Upon checking out the code, I found the following:

.cfdiv_checkboxgroup label, .cfdiv_radio label {
width: auto;
margin-right: 25px;
}

in file /components/com_chronoforms/css/frontforms_tight.css

I tried also changing this as changing the value in Chromes "Inspect Element" fixed it first time round, but not from then onwards😟

*Edit: Upon playing with the value in "frontforms_tight.css" I have managed to get some of them showing fine, but it has now broken the Day of the week & marital status areas😟

I have left the code in "load.css" as 600px and not auto, and the "frontforms_tight.css" code as auto (as if i never touched it) so the marital status & day of the week are working fine, but all of the yes/no buttons are broken still😟

Hi nuvelle,

As I said you may need to use CSS selectors to stop the changes having side-effects elsewhere. It looks as though you have found what needs to be changed, you need to write the CSS that will make the changes just to the form code. ChronoForms applies ids and classes that make that fairly simple to do.

Bob