Forums

LS,
I have made a Form in chronoform and when I placed it on my site the fields are streched al over the page.
is there a way to change the size of them?

Caroleen2000
caroleen.nl

Hi Caroleen2000,

This is probably from the CSS in your site template. Please use your browser web developer tools to check exactly what CSS is being applied.

Bob

thanks for react GreyHead,
I can see that template.css is used but can not find where the table setting are done.
can you help me out?

Hi caroleen2000,

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

Bob

http://caroleen.nl/index.php?option=com_chronoforms&view=form&Itemid=94
Here by the link you asked for.

Hi caroleen2000,

This is the CSS that is setting the width to 100%; from line 1473 of your template CSS.

input[type="text"], input[type="password"], input[type="email"], input[type="url"], textarea {
    color: #172126 !important;
    font-family: 'Droid Serif',Arial,'Arial Unicode MS',Helvetica,Sans-Serif;
    font-size: 13px;
    font-style: normal;
    font-weight: normal;
    padding: 4px 0;
    width: 100%;
}

I suggest that you over-write this using the ChronoForms Load CSS action.

Bob

Thanks for you answer Bob,

I have tried to add a css file on load, but it not seems to overide the template.css.

So for the moment i have changed it in the template.css and that works for now.
I am away for a while and when I'am back I look further to it.

Hello CAroleen and Bob,
I'm have the same problem. I saw youre website and i'm put "Custom Code" into the "On Load".
I even uploaded the ChronoForms v4 action load_css_file_gh.zip and installed it with "Action".

But i don't have a cloe how to solve the problem. The fields are larger then the module on the right side...
http://www.esbao.nl/contact

For all: Best wishes...

En voor alle Nederlanders: De beste wensen en een goed 2013
RObin

Hi Robin,

I suggest that you check out a CSS tutorial - W3Schools have some that are OK.

If you add this to a Load CSS action it makes the form look OK but you may need to refine it further if you have more than one form on the page:

.cfdiv_text {
  width: 170px;
}

Bob

Hi Bob and Caroleen,

I did some research on W3 Schools. i checked out the www and founs nothing. Then i was thinking "What im i doing wrong.......?
Bob posted a picture as i want it to be...
So i checked chronoform wizard and the events.... i had custom code. I deleted this and took "Style form" changed "Form Width" from auto to 170px and voila it worked for me.
Later on i had to change the Label font from arial to verdana, because that is what i prefer...

Thanx for youre replay and tell what the best way is to buy you some beer? Heineken, Amstel, Palm or Bavaria??😉
Robin
http://www.esbao.nl/contact