Radio Buttons and Checkboxes on Wrong Side of Label

Hi,

for some reason the checkboxes and radio buttons are on the left hand side of their option labels (not their main label titles)

for example

Choose Color: [] Blue [] Green [] Yellow

When it should be

Blue [] Green [] Yellow []

how do i fix this?

usng the latest verison V4 3.3 on joomla 2.5

thanks.

Hi KaKoRot,

In the Checkbox group 'Other' tab set check the Hide Label box.

Drag a Load CSS action into the On Load event and add this CSS:

.cfdiv_checkboxgroup label, .cfdiv_radio label {
  margin-left: 25px !important;
  margin-right: 0 !important;

}
.cfdiv_checkboxgroup label, .cfdiv_radio label, 
  .cfdiv_checkboxgroup input, .cfdiv_radio input {
  float: right !important;
}

That seems to work OK, though you may need to change the order of the options.

Bob

many thanks for this, though anyway I can get the labels back and floating left without it breaking everything else?

Hi KaKoRoT,

What else is broken?

Bob

Hi Bob,

Sorry i should of been more clear,

now that I have added the css, the labels are on the far right, i need them back on the left e.g.

Yes [] No[] Make a Selection:

when it should be

Make a Selection: Yes [] No[]

The css you gave has finally done "Yes [] No[]" but now i got the above issue.

please help

Hi KaKoRoT,

This should put the group label back on the left:

.cfdiv_checkboxgroup label, .cfdiv_radio label {
  margin-left: 25px !important;
  margin-right: 0 !important;

}
.cfdiv_checkboxgroup label, .cfdiv_radio label, 
  .cfdiv_checkboxgroup input, .cfdiv_radio input {
  float: right !important;
}
.cfdiv_checkboxgroup label:first-child, 
  .cfdiv_radio label:first-child {
    float: left !important;
}

Bob

aha! you are the man!!!! 😀

Thanks!!

When I use checkboxes group at the end of the line, there is a box, but the label is below, at the beginning of the next line.
Is there a way to keep box + label on the same line ?

Also how can I do to add css to a checkbox : My label is very long and the horizontal width for the label is small so that the label is on 3 lines . I would like the lable to take the whole line with the bow at the end.
thanks

Hi Lydia,

You can either add CSS to reformat this element; or use a Custom element and add the HTML by hand.

Bob

Thanks, I 'll go for the first solution : add css
however in checkboxes configure options there is nowhere to put the new css (unlike other elements)
How should I proceed ?

Hi Lydia,

You can drag a Load CSS action (from the Utilities action group) into the On Load event on the actions tab and add CSS there.

Bob

I don't think that dragging an onload css will work here

Using firebug I see that I have for example:

<label for="input_checkbox_group_14_5">Chiawa Camp</label>
<input id="input_checkbox_group_14_6" class="validate['group[14]']" type="checkbox" value="choice 7" title="Accommodation of interest" name="input_checkbox_group_14[][]">

<label for="input_checkbox_group_14_6">Old Mondoro Camp</label>
<input id="input_checkbox_group_14_7" class="validate['group[14]']" type="checkbox" value="choice 8" title="Accommodation of interest" name="input_checkbox_group_14[][]">

I need
<label> and <input> box on the same line
but they have different classes.

Any idea ?

Hi lydiab,

Please post a link to the form so I can take a quick look.

Bob

thanks
here is the link

http://www.zambia-safari.com/en/booking-enquiries.html

You can see the field "accommodation of interest" in the middle of the form.

Hi lydiab,

Please try adding this to a Load CSS action

div.cfdiv_checkboxgroup {
  width: 600px;
}

or a smaller width for two columns. This isn't ideal but will probably work OK.

Bob

beautiful !

thanks
I am now going to validate for 2 or 3 more sites !