Text field size

gorangrooves , October 06 2012
g
gorangrooves

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?

GreyHead

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

g
gorangrooves

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!

GreyHead

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

g
gorangrooves

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...

GreyHead

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

Attachments
08-10-2012 07-30-00.png
08-10-2012 07-30-00.png
(11.33 KiB)
4099 Downloads/Views
g
gorangrooves

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

GreyHead

Hi Goran,

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

Bob

g
gorangrooves

Thank you! I will check that out.

j
jinx52

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

GreyHead

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

j
jinx52

Thanks very much Bob!
Nick

j
joejoeberg

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 :D

GreyHead

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

Powered by ChronoForums - ChronoEngine.com

ChronoForms Book

The ChronoForms Book, written for ChronoForms v3 contains 350 pages of invaluable ChronoForms How-tos hints and tips.

Note: many of the ideas can be used in ChronoForms v4 but the admin interface is very different and code examples may need to be modified.

SSL

Members Login

 

2CheckOut.com Inc. (Ohio, USA) is an authorized retailer for
goods and services provided by ChronoEngine.com