Forums

Radio Buttons Jump all over?

cb1 26 Aug, 2009
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!
GreyHead 26 Aug, 2009
Hi cb1,

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

Bob
GreyHead 26 Aug, 2009
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
GreyHead 15 Dec, 2009
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
cb1 15 Dec, 2009
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!
GreyHead 15 Dec, 2009
Hi cb1,

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

Bob
Grumpster 30 Dec, 2009
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.

:)
Grumpster 30 Dec, 2009
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.
GreyHead 30 Dec, 2009
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
This topic is locked and no more replies can be posted.