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
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
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>
<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.
Except for the 'href', that is the standard format of the confirmation message in WFB.
What's not to compute?
What's not to compute?
There is no href attribute in a style declaration.
Anyway, your page is no longer loading.
Anyway, your page is no longer loading.
Let's not get all hurt.
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?
Page is working fine at the moment.
Anyway, still looking for a solution to show the whole message.
Suggestions anyone?
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
You need to use a <link> declaration to correctly include the stylesheet.
Anyway, your iframe has the scrolling attribute set to no. You probably want yes or auto instead.
<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.
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.
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.
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.
Thanks David, that is perfect.
Many thanks for your help.
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.