function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
ErikNelke1ErikNelke1 

Visual Force Wrap Text in Text Area field on Pre-Chat Form

We have a pre chat form where the case contact enters some text. We want the text to wrap with in the text area field so they can see what they are typing. Right now it is a single line that disappears at the end of the field.

this is the line controlling that field but no luck to date getting it to wrap.

Image attached of what it looks like with now.

 <input style="margin-left: 36px;height: 100px; Width:300px; word-wrap: break-word;" type='textarea' name='liveagent.prechat:CaseSubject' id='subject' /><br />  

User-added image
Khan AnasKhan Anas (Salesforce Developers) 
Hi Erik,

Greetings to you!

You need to set white-space style to pre-wrap. Please refer to below link for more information on the CSS white-space Property: 
https://www.w3schools.com/cssref/pr_text_white-space.asp
  
style="white-space:pre-wrap;"

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
ErikNelke1ErikNelke1
Thanks for taking a look. Gave it a try but no luck getting it to wrap.

<!-- Form that gathers information from the chat visitor and sets the values to Live Agent Custom Details used later in the example -->
<form method='post' id='prechatForm'>
    
    <div class="rTableWithBorder"> 
    <label style="margin: 50px;font-size: 125%;" for="firstName">First Name:</label>
    <input type='text' name='liveagent.prechat:ContactFirstName' id='firstName' /><br />
    
    <label style="margin: 50px;font-size: 125%;" for="lastName">Last Name:</label>
    <input type='text' name='liveagent.prechat:ContactLastName' id='lastName' /><br />
    
    <label style="margin: 50px;font-size: 125%;" for="email">Email:</label>
    <input style="margin-left: 34px;" type='text' name='liveagent.prechat:ContactEmail' id='email' /><br />
    
    <label style="margin: 50px;font-size: 125%;" for="phone">Phone:</label>
    <input style="margin-left: 28px;" type='text' name='liveagent.prechat:ContactPhone' id='phone' /><br />
    
    <label style="margin: 50px;font-size: 125%;" for="Protocol_Name_Number__c">Protocol:</label>
    <input style="margin-left: 18px;" type='text' name='liveagent.prechat:Protocol_Name_Number__c' /><br />
    
    <label style="margin: 50px;font-size: 125%;" fo="subject">Issue:</label>
    <input style="margin-left: 36px;height: 100px; word-wrap: break-word; Rows=10; white-space:pre-wrap; Width:300px;" type='textarea' name='liveagent.prechat:CaseSubject' id='subject' /><br />