close ad
Databridge V2 with MySQLi support IS Now Available!
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Text not legible in text area

Thread began 12/20/2012 7:21 am by thehalpeen319342 | Last modified 12/21/2012 8:57 am by thehalpeen319342 | 1094 views | 10 replies |

thehalpeen319342

Text not legible in text area

Dear Jason,

I created a simple contact form with CSS Form Builder using the 'sharp' design - see attached zip.

I made one change to the form in CSS Form Builder before it was processed, and that was to make the 'comments text area field' a 'required' field.

This has had a strange effect. Firstly if a user just hits the submit button, all the validation tooltips appear (expected). However, the comments box has taken on a red colour, the other text boxes are a 'salmon pink' colour. That's not too bad, but the main problem - after you hit the submit button and it contains no comment - is you cannot see the text when you do go to type text in the comments box. You only see the text when you click out of the box - so the user doesn't realise that he is typing anything and this obviously would cause the user problems.

Attached Files
comments.zip
Sign in to reply to this post

Jason ByrnesWebAssist

this is a css issue with the Spry Text field.

see the following for details on the various css styles associated with the spry text field:
WSC0A9CA2A-E807-441a-ACC2-7B5E7A503C74a.html

if you need more assistance, i will need a link where i can see the problem.

Sign in to reply to this post

thehalpeen319342

Jason, you'll see the problem in the zip I sent. It's the simple contact form that was created in CSS Form Builder.

I edited one field in CSS Form Builder - I just made the 'comments text area' a required field - that's all I did, CSS Form Builder did the rest - the result is in the zipped file.

Sign in to reply to this post

Jason ByrnesWebAssist

the zip contains only the form without any of the supporting css, using this file, i cannot troubleshoot.

I need a link to your comments page on your website to see the problem in the browser.

Sign in to reply to this post

thehalpeen319342

ol, let me upload it for you.

Sign in to reply to this post

thehalpeen319342

In the meantime, here is the actual file with the WebAssist folder containing the CSS, and all the other WebAssist material used to create the comments page.

Attached Files
CommentsForm.zip
Sign in to reply to this post

thehalpeen319342

Ok Jason, I've uploaded the file to view in the browser


Just hit submit, and then try and type some test in the comments field - you can't see what you are typing.

Sign in to reply to this post

Jason ByrnesWebAssist

in the webassist/forms/fd_sharp_default.css file, the following style is setting the color for the failed text area to white:

form.Sharp_Default textarea.textareaRequiredState, form.Sharp_Default .textareaRequiredState textarea, form.Sharp_Default textarea.textareaMinCharsState, form.Sharp_Default .textareaMinCharsState textarea, form.Sharp_Default textarea.textareaMaxCharsState, form.Sharp_Default .textareaMaxCharsState textarea {
background-color: #B40000;
border-color: #8C8C8C;
color: #FFFFFF;
}




you can change that to black by changing the css to:

form.Sharp_Default textarea.textareaRequiredState, form.Sharp_Default .textareaRequiredState textarea, form.Sharp_Default textarea.textareaMinCharsState, form.Sharp_Default .textareaMinCharsState textarea, form.Sharp_Default textarea.textareaMaxCharsState, form.Sharp_Default .textareaMaxCharsState textarea {
background-color: #B40000;
border-color: #8C8C8C;
color: #000000;
}
Sign in to reply to this post

thehalpeen319342

Jason, is this a bug in Form Builder or did should I have done something different? In other words, if I change something to require in Form Builder, will I have to do this code adjustment each time - again it's no big deal, but would be nice to know.

Sign in to reply to this post

Jason ByrnesWebAssist

in form builder, edit the design.

from the initial select list, click form elements, then select Text Area.

in the state section, select the invalid state to edit the font color that is used.

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...