Text field size

Hi,
For some reason text fields in the new forms are being stretched out for the width of the sheet. Changing "field size" values doesn't change a thing.
How do I make this happen, please?

Hi gorangrooves,

It's probably your template CSS conflicting with the ChronoForms CSS. Please post a link to the form so I can take a quick look.

Bob

Thank you. Here is the link:
http://gorangrooves.com/jupgrade/index.php?option=com_chronoforms&chronoform=drumtrackssubmit
Can you please take a quick look at the tooltips while you are there? Are they supposed to look that way? The ones I remember from previous forms were nice with rounded edges.
Thanks a lot!

Hi gornagroves,

Your template CSS is setting the width of inputs to 100%

input[type="text"], input[type="password"], input[type="email"], input[type="url"], textarea {
    color: #2D454D !important;
    font-family: Verdana,Geneva,Arial,Helvetica,Sans-Serif;
    font-size: 13px;
    font-style: normal;
    font-weight: normal;
    padding: 8px 0;
    width: 100%;
}

It looks as though you have now over-written the tooltip CSS?

Bob

Thanks, Bob.
I'll look into those text fields and see how I can fix them.
Yes, I changed the tooltip output using an extra CSS code you suggested in another post. It helped but it is still nowhere as nice it is used to be. Those question marks look odd, the tooltip is totally square and kind of cold-looking...

Hi gorangrooves,

The tooltip styling appears to be a mixture of ChronoForms and template. It's not too difficult to over ride it with something like this though:

div.tooltipimg a {
    background-image: url("/jupgrade/media/system/images/tooltip.png");
    background-repeat: no-repeat;
}
.tooltipbox div.tip {
    background-color: #EEEEEE;
    border: 1px solid silver;
    border-radius: 12px 12px 12px 12px;
    padding: 12px;
    width: 200px;
    font-family: verdana;
    font-size: 0.8em;
}

Note: This may need tweaking to work on a Load CSS action.

Bob

Bob, you are the man! Thank you so much. That looks awesome.
I just need to get rid of that question mark that is still in there. How easy is it to do that?
Thanks heaps. I'll be in touch soon.
Goran

Hi Goran,

See this StackOverflow post for a way to hide the text 'i' without having to hack the code.

Bob

Thank you! I will check that out.

Hi,
I have he same problem with text boxes running to the edge of the page here;
http://www.nicolaschance.com/contact
Is there an easy way to fix it within ChronoForms?
Thanks,
Nick

Hi Nick,

Yes, change or better over-ride, this line (around line 956) in your template CSS

input[type="text"], input[type="password"], input[type="email"], input[type="url"], textarea {
    color: #364749 !important;
    font-family: Arial,'Arial Unicode MS',Helvetica,Sans-Serif;
    font-size: 13px;
    font-style: normal;
    font-weight: normal;
    padding: 8px 0;
    width: 100%; // <<< this is setting the width
}

Bob

Thanks very much Bob!
Nick

Bob,

I've been messing around with the css in this http://www.signsoflittlefalls.com/send-us-a-picture form.

I'd like to lenghen & shorten the information & hear about us textarea's, without modifying the your_name, email, and captcha input text area's. I just can't find a way to do it.

Could you point me in the right direction?

Thanks,

Joe

P.S. I bought you a beer in advance😀

Hi Joe,

There are 'Field Columns' and 'Field Rows' settings in the Element configuration; or you can use CSS to be more specific with the settings.

Bob