Radio Buttons Jump all over?

hey,

Created a form that contains a few sets of radio buttons. However - in firefox - they jump all over when you press one or a combination of radio buttons. Any idea on what may be going on?

Thanks!

Hi cb1,

No. probably a css problem. Perhaps a link might help?

Bob

Hi cb1,

There's a validation message span that pops in and out - it has no content except for a single space so you can't see it. It appears to be in between the </td> + <td> for the buttons. Try wrapping the buttons in a div or move the validation message into its own div.

Bob

Hey Bob,

I know I havent talked about this in a while (I get tied up with all sorts of things)... but want to fix this.

However - I don't understand what you are talking about - could you elaborate a bit.

The issue happens under education and happens under references.

http://www.anniesfrozencustard.com/index.php?option=com_content&view=article&id=94&Itemid=60

Hi cb1,

Very late but I finally got to look at this. The problem is that there are some blank validation messages showing up int he html

<span class=" LV_validation_message LV_valid"> </span>

Probably easiest just to add a css snippet to hide them.

Bob

Hey Bob,

Could you give me an example of what you are talking about? I didn't understand your post before that - but had other irons in the fire I had to attend too. This issue is still outstanding and I'd love to "put 'er to bed!"

Thanks man!

Hi cb1,

Please look at the page source to see this, preferably with FireBug so that you can see the changes.

Bob

I have just encountered this problem, too. Very frustrating!

I have set the visibility for the CSS display selector to "none" as follows:

/components/com_chronocontact/css/consolidated_common.css

.LV_validation_message {
display:none;
padding-left:160px;
font-weight:bold;
font-size:12px;
margin:0 0 0 0;
}

Normally, it is set to display:block.

This does get rid of the jumping radio buttons, but now I have no error messages which is just as bad because now people can't tell which field they've forgotten (or should) fill in.

Why does the Live Validation routine stick in this empty span tag in between my td tags? I don't mind the error messages next to my empty fields, but this span tag getting thrown into my code is really annoying.

How can we fix this problem properly? I've looked into some of the php files to find the base code responsible, but so far I've not found it.

GreyHead, you mentioned in your post above about putting the error code into its own div ... can you please clarify what you meant. If I can make that empty span tag appear in a harmless location, rather than into the table holding my radio buttons, I'll be a happy camper.

:)

Fixed!

At least for me. This fix works because only my radio buttons are inside an HTML table; the rest of my form code is outside of any tables.

Add the following CSS to the consolidated_common.css file:

components/com_chronocontact/css/consolidated_common.css

tr span.LV_validation_message, tr span.LV_invalid {
display:none;
}

The above CSS code hides the empty span tag inside any table <tr> tags. I chose the tr tag because the problematic error tag actually appears between a closing </td> and the next opening <td> tag, so I couldn't use just the td selector. I could have used the table selector, but that would have been overkill.

Any fields you have outside of your tables will still have their normal, proper error messages preserved so your form users can still find and fix any errors or omissions.

Hi Grumpster,

The LiveValidation has several options for controlling the error message display - including the ability to specify an error handling function. As far as I know you have to use custom validations for this to work -- at least I haven't yet discovered how to change the configuration of the validations that ChronoForms sets. This isn't hard to do, just a bit tedious.

See the LiveValidation docs for more.

I'm not sure exactly where the LV error span is placed, it could be that wrapping your input in a div will force it back inside the <td>.

Bob