close ad
Help us test the new Databridge BETA with MySQLi support
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

CSS styling for registration errors

Thread began 9/18/2012 10:19 am by Justin@AdventDesign | Last modified 9/19/2012 11:43 am by Jason Byrnes | 913 views | 4 replies |

Justin@AdventDesign

CSS styling for registration errors

I love your extensions but sometimes trying to customize the look and feel drives me insane! I've tried everything to fix the lack of wrapping of the error message for an invalid password (see attached screen shot). Can someone give me any insight here? Is this something embedded in the JS? I've tried setting widths and max-widths to just about every spec I can find. While the box will set to width, the contents refuse to wrap no matter what I do!

Sign in to reply to this post

Jason ByrnesWebAssist

That is the spry validation error message.

see the adobe spry documentation:
help.html?content=WS575C95C1-CA37-4eb3-BD05-E46DEFE70617.html

in the "Style Validation Text Field widget error message text"


if you need more specifics, please send a link where i can see you page.

Sign in to reply to this post

Justin@AdventDesign

Sorry - I understand that this is outside webassist then. I apologize for entering what is essentially a css question, but thought maybe others would run into it as well.

For what it's worth, the page is:
registration.php
(please don't submit the form, but you can see what happens by entering a long line of letters only in the password field)

The css for that particular box is actually in:
SpryValidationPassword.css

The rule is:
.passwordRequiredState .passwordRequiredMsg,
.passwordMinCharsState .passwordMinCharsMsg,
.passwordMaxCharsState .passwordMaxCharsMsg,
.passwordInvalidStrengthState .passwordInvalidStrengthMsg,
.passwordCustomState .passwordCustomMsg
{
display: block;
width: 560px;
color: #CC3333;
border: 1px solid #CC3333;
}

As you can see, I've set a width, which affects the red box, but the text just runs beyond. I've also tried setting overflow to 'auto', but all that does is add a scrollbar to the thing. I can not make heads or tails as to why that line of text refuses to wrap as it should.

Sign in to reply to this post

Justin@AdventDesign

I've forced it to wrap manually with br tags, but I'd still prefer to fix it properly, if I could figure out the issue.

Sign in to reply to this post

Jason ByrnesWebAssist

in the webassist/forms/fd_basic_default.css file there is a condition that forces the message not to wrap:

form.Basic_Default .passwordRequiredState .passwordRequiredMsg, form.Basic_Default .passwordMinCharsState .passwordMinCharsMsg, form.Basic_Default .passwordMaxCharsState .passwordMaxCharsMsg, form.Basic_Default .passwordInvalidStrengthState .passwordInvalidStrengthMsg, form.Basic_Default .passwordCustomState .passwordCustomMsg {
color: #B40000;
white-space: nowrap;
}



comment the white-space: nowrap; line:

form.Basic_Default .passwordRequiredState .passwordRequiredMsg, form.Basic_Default .passwordMinCharsState .passwordMinCharsMsg, form.Basic_Default .passwordMaxCharsState .passwordMaxCharsMsg, form.Basic_Default .passwordInvalidStrengthState .passwordInvalidStrengthMsg, form.Basic_Default .passwordCustomState .passwordCustomMsg {
color: #B40000;
/*white-space: nowrap;*/
}




to allow the password message to wrap

Sign in to reply to this post

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