Confirmation message - text area...

User 256387 Photo


Registered User
19 posts

I have a problem formatting the confirmation message.

If you enter a lot of text in the text area (scroll bar appears) and then submit the form, only the initial size of the text area is visible.
I am concerned that this may make people believe part of their message is cut off.
How can I fix that? How do I get the scroll bar in the confirmation message?

Here is my formatting:
<center>
<style href="Feedback/theme/default/css/confirm.css" rel="stylesheet" type="text/css">

#docContainer table {margin-top: 10px; margin-bottom: 30px; width:350px;}
#docContainer td {font-size: 12px !important; line-height: 30px;color: #666666 !important; margin: 0px;border-bottom: 1px solid #e9e9e9;}
#docContainer td:first-child {font-size: 13px !important; font-weight:bold; color: #333 !important; vertical-align:text-top; min-width:100px; padding-left:5px;}
</style>
<h2>Thank you [FullName]!</h2><br/>
<p>Your form was successfully submitted. <br/>Here's a copy of what we will receive:</p>
</center>
<div id="docContainer" align="left">
<table>
<td><strong>Your name: </strong></td>
<td>[FullName]</td></table>
<table><td><strong>Your email: </strong></td>
<td>[email3]</td></table>
<table><td><strong>and your feedback: </strong><br/></td>
<td>[Feedback]</td>
</table>
</div>

The form is here: http://www.eventsafetyalliance.org.au/feedback.html
It isn't live yet so have a go if you want.

Regards
Roderick
User 2733 Photo


Ambassador
426 posts

Roderick van Gelder wrote:
<style href="Feedback/theme/default/css/confirm.css" rel="stylesheet" type="text/css">

#docContainer table {margin-top: 10px; margin-bottom: 30px; width:350px;}
#docContainer td {font-size: 12px !important; line-height: 30px;color: #666666 !important; margin: 0px;border-bottom: 1px solid #e9e9e9;}
#docContainer td:first-child {font-size: 13px !important; font-weight:bold; color: #333 !important; vertical-align:text-top; min-width:100px; padding-left:5px;}
</style>

This does not compute.

Check this out http://www.cssbasics.com/introduction-to-css/
Let's not get all hurt.
User 256387 Photo


Registered User
19 posts

Except for the 'href', that is the standard format of the confirmation message in WFB.

What's not to compute?
User 2733 Photo


Ambassador
426 posts

There is no href attribute in a style declaration.

Anyway, your page is no longer loading.
Let's not get all hurt.
User 256387 Photo


Registered User
19 posts

Well, without the href it didn't pick up the style sheet, which is why I added it.

Page is working fine at the moment.

Anyway, still looking for a solution to show the whole message.
Suggestions anyone?
User 38401 Photo


Senior Advisor
10,951 posts

The href should be src= try that and see if that makes a difference as href is entirely wrong for styling as David said. I would suggest checking out http://www.w3schools.com/ to get some tutorials on how things like this are supposed to be setup. It's one thing to not have it work at all, but it's another if the code is wrong even if it's working ;)
User 2733 Photo


Ambassador
426 posts

You need to use a <link> declaration to correctly include the stylesheet.

<link rel="stylesheet" type="text/css" href="Feedback/theme/default/css/confirm.css" />


Anyway, your iframe has the scrolling attribute set to no. You probably want yes or auto instead.
Let's not get all hurt.
User 256387 Photo


Registered User
19 posts

Thanks David,

Unfortunately the 'link' declaration didn't work, only confused matters further.
I have taken it all out now and much to my surprise it is finding the CSS.
Changed the scrolling attribute which works but it is not very elegant.
It scrolls the whole form rather then just the textbox. But it'll do for now.

Now I just need to find out why the 'name' field won't align right and we are done!

Thank you for the help, learned something today.
User 2733 Photo


Ambassador
426 posts

The <textarea> only appears on the form before submission and it scrolls fine. There is no <textarea> or any other form fields displayed after submission, only form results. The results page uses a table for display and that table contains cells that hold your form results. A <td> (cell) will not scroll reliably in all browsers. You would need to use a div.

<td><div style="overflow-y:scroll; height:200px;width:100%">[Feedback]</div></td>
Let's not get all hurt.
User 256387 Photo


Registered User
19 posts

Thanks David, that is perfect.

Many thanks for your help.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.