CSS confusion with #ChronoContact_form_5 #check04

Hi,

This is a great plugin.

We've had a site developed for us and they used ChronoForms to create a plug in.

However I went in myself because I wanted to add just a text box to the form and it's mucked up the layout / CSS.

I used fire bug to try and locate the issue but it's saying the css is coming from the page itself :?

Here:

http://www.visionmodels.co.uk/index.php?option=com_chronocontact&task=send&chronoformname=join&Itemid=10

The direct link doesn't work when you click it but it is the last (5th) page on the join us form

http://www.visionmodels.co.uk/join-us.html

In firebug it is to do with the margin here

#ChronoContact_form_5 #check01 {
margin-left: 41px;
}

But i can't find where that margin is being generated????

Please help🙂

Hi maxone,

It's nothing that I recognise from ChronoForms and it doesn't appear to be in the page source so I can only guess that it's being created by some javascript in the page somewhere. Not much help but the best I can offer.

Please will you use the Copy icon in ChronoForms to copy just that form - join_5 I think. Give the copy a new name like join_5a and post the link to that new form here. With luck I can then see the form outside the multi-page setup.

Bob

Hi and thanks for reply.

I actually did see it in the Page Source.

If you click on this link http://www.visionmodels.co.uk/join-us.html

then click "next" until you get to the last page, basically when the next button turns into "submit" and the radio buttons are all messed up and out of line :wink:

then click page source, I can see the css there.

It looks like this:

</script>
<style type="text/css">
#ChronoContact_form_5 #check01{margin-left:41px}
#ChronoContact_form_5 #check02{margin-left:53px}
#ChronoContact_form_5 #check04{margin-left:0px}
#ChronoContact_form_5 #check05{margin-left:63px}
#ChronoContact_form_5 #check07{margin-left:72px}
#ChronoContact_form_5 #check08{margin-left:79px}
#ChronoContact_form_5 #check010{margin-left:62px}
#ChronoContact_form_5 #check011{margin-left:0px}
#ChronoContact_form_5 #check013{margin-left:19px}
#ChronoContact_form_5 #check014{margin-left:80px}
#ChronoContact_form_5 #check016{margin-left:72px}
#ChronoContact_form_5 #check017{margin-left:47px}
#ChronoContact_form_5 #check21{margin-left:47px}
#ChronoContact_form_5 #check22{margin-left:49px}
#ChronoContact_form_5 #check24{margin-left:38px}
#ChronoContact_form_5 #check25{margin-left:5px}
</style>

Still have no idea where this code is being generated from...

Any help greatly appreciated🙂

Hi Maxone,

Yes, that's the CSS I saw in FireBug. Doesn't give me any clue about what is creating it though.

Were you able to make the copy form?

Bob

Hey,

I worked it out!!

Go to Components > Chrono Forms > Form Management
Click at the form named “xxxx”
When the page changed, click at the tab named “Form code”
At the “Form Code” click at [+/-] next to CSS Styles
Edit CSS

Good times🙂

Hi maxone,

Well found. I didn't expect it to be in the ChronoForms CSS (but you discover all kinds of things when you go digging).

Bob